<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>SVG Marker Level 1</title>
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css">
  <link href="http://dev.w3.org/fxtf/motion-1/" rel="canonical">
<style>
dl.attrdef-list dl { margin-top: 1em }
dl.attrdef-list > dt { font-weight: normal }

/* Attribute definition tables */
table.attrdef { border-left-color: #888; border-left-width: 0; background-color: #eee; font-size: 90% }
table.attrdef th, table.attrdef td { border-bottom-color: #ccc }

table.attrdef th:first-child,
table.attrdef td:first-child { width: 16em; padding-left: 0 !important }

table.attrdef th:first-child + th,
table.attrdef td:first-child + td { width: auto }

table.attrdef th:first-child + th + th,
table.attrdef td:first-child + td + td { width: 6em }

table.attrdef th:first-child + th + th + th,
table.attrdef td:first-child + td + td + td { width: 6em; padding-right: 0 !important }
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1>SVG Marker Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="http://dev.w3.org/fxtf/motion-1/">http://dev.w3.org/fxtf/motion-1/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:www-svg@w3.org?subject=%5Bsvg-markers%5D%20YOUR%20TOPIC%20HERE">www-svg@w3.org</a> with subject line “<kbd>[svg-markers] <i data-lt>… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/www-svg/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:cam@mcc.id.au">Cameron McCormack</a> (<span class="p-org org">Mozilla Corporation</span>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Markers are graphical objects that are painted at particular positions along a <a data-link-type="element" href="https://svgwg.org/svg2-draft/paths.html#elementdef-path" id="ref-for-elementdef-path">path</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-line" id="ref-for-elementdef-line">line</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polyline" id="ref-for-elementdef-polyline">polyline</a> or <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polygon" id="ref-for-elementdef-polygon">polygon</a> element.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> <em>This section describes the status of this document at the time of
	its publication. Other documents may supersede this document. A list of
	current W3C publications and the latest revision of this technical report
	can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
	index at http://www.w3.org/TR/.</a></em> </p>
   <p> This document is the 1 January 1970 <strong>Editor’s Draft</strong> of SVG Marker Level 1. </p>
   <p> Comments on this Editor’s Draft are welcome. Comments can be sent to <a href="mailto:www-svg@w3.org?Subject=%5Bsvg-markers%5D%20PUT%20SUBJECT%20HERE">www-svg@w3.org</a>,
	the public email list for issues related to vector graphics on the Web. This list is <a href="http://lists.w3.org/Archives/Public/www-svg/">archived</a> and senders must agree to have their message
	publicly archived from their first posting. To subscribe send an email to <a href="mailto:www-svg-request@w3.org?Subject=subscribe">www-svg-request@w3.org</a> with the word <code>subscribe</code> in the subject line. </p>
   <p> This document has been produced by the <a href="http://www.w3.org/Graphics/SVG/WG">SVG Working Group</a> as part of the <a href="http://www.w3.org/Graphics/Activity">Graphics Activity</a> within the <a href="http://www.w3.org/Interaction/">W3C Interaction Domain</a>. The goals of the W3C SVG Working Group are discussed in the <a href="http://www.w3.org/2007/11/SVG_rechartering/SVG-WG-charter.html">W3C SVG Charter</a>. The W3C SVG Working Group maintains a
	public Web page, <a href="http://www.w3.org/Graphics/SVG/">http://www.w3.org/Graphics/SVG/</a>, that contains further
	background information. The authors of this document are the SVG Working Group participants. </p>
   <p> This document was produced by a group operating under 
	the <a href="http://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>. 
	W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/19480/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of each group; 
	these pages also includes instructions for disclosing a patent. 
	An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> A list of current W3C Recommendations and other technical documents can be found at <a href="http://www.w3.org/TR/">http://www.w3.org/TR/</a>. W3C publications may be updated, replaced, or
	obsoleted by other documents at any time. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#MarkerElement"><span class="secno">2</span> <span class="content">The <span>marker</span> element</span></a>
    <li><a href="#MarkerReferences"><span class="secno">3</span> <span class="content">Referencing <span>marker</span> elements</span></a>
    <li><a href="#VertexMarkerProperties"><span class="secno">4</span> <span class="content">Vertex markers: the <span class="property">marker-start</span>, <span class="property">marker-mid</span> and <span class="property">marker-end</span> properties</span></a>
    <li><a href="#SegmentMarkers"><span class="secno">5</span> <span class="content">Segment markers: the <span class="property">marker-segment</span> property</span></a>
    <li><a href="#RepeatingMarkers"><span class="secno">6</span> <span class="content">Repeating markers: the <span class="property">marker-pattern</span> property</span></a>
    <li><a href="#MarkerShorthand"><span class="secno">7</span> <span class="content">Marker shorthand: the <span class="property">marker</span> property</span></a>
    <li><a href="#MarkerKnockout"><span class="secno">8</span> <span class="content">Knocking out the stroke: the <span class="property">marker-knockout-left</span> and <span class="property">marker-knockout-right</span> properties</span></a>
    <li><a href="#MarkerAlgorithm"><span class="secno">9</span> <span class="content">Details on how markers are rendered</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
       <ol class="toc">
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
       </ol>
      <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <p>A marker is a graphical object that is painted at particular positions along
a <a data-link-type="element" href="https://svgwg.org/svg2-draft/paths.html#elementdef-path" id="ref-for-elementdef-path①">path</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-line" id="ref-for-elementdef-line①">line</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polyline" id="ref-for-elementdef-polyline①">polyline</a> or <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polygon" id="ref-for-elementdef-polygon①">polygon</a> element, together known as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport external id="markable-elements">markable elements</dfn>.  There are four ways
markers can be placed on these elements:</p>
   <ul>
    <li>The <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start">marker-start</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end">marker-end</a> properties
  can be used to place markers at the first and last vertex, and the <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid">marker-mid</a> property can be used to place markers at every
  other vertex (aside from the first and last).  The <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start①">marker-start</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end①">marker-end</a> can be used for example to add arrowheads to paths.
  Markers placed using these properties are known as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="vertex-markers">vertex markers</dfn>.
    <li>The <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment">marker-segment</a> property can be used to place markers
  at the center of every path segment. These markers are known as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport external id="segment-markers">segment markers</dfn>.
    <li>The <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern">marker-pattern</a> property can be used to define
  a regular repeating pattern of markers to place along the length of the
  path.  Markers placed with <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern①">marker-pattern</a> are known as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport external id="repeating-markers">repeating markers</dfn>.
    <li>A child <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker">marker</a> element with a <a data-link-type="element-attr" href="#element-attrdef-marker-position" id="ref-for-element-attrdef-marker-position">position</a> attribute
  can be used to place a marker at a particular location along the path.
  Such markers are known as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport external id="positioned-markers">positioned markers</dfn>.
   </ul>
   <p class="issue" id="issue-d6146a12"><a class="self-link" href="#issue-d6146a12"></a> There are probably better terms to use than "vertex" and
"segment" markers.  At least, "vertex" would go more naturally with "edge",
but we should use more natural sounding names.</p>
   <p>The graphics for a marker are defined by a <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①">marker</a> element.
The <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start②">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end②">marker-end</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid①">marker-mid</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment①">marker-segment</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern②">marker-pattern</a> properties, together known
as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="marker-properties">marker properties</dfn>, reference <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②">marker</a> elements.</p>
   <p>Markers can be animated, and as with <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use">use</a> elements, the animated
effects will show on all current uses of the markers within the document.</p>
   <p>Markers on a given element are painted in the following order, from
bottom to top:</p>
   <ul>
    <li data-md>
     <p>any marker specified by <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start③">marker-start</a></p>
    <li data-md>
     <p>alternating <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid②">marker-mid</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment②">marker-segment</a> markers, in order of their position along the path</p>
    <li data-md>
     <p>any <a data-link-type="dfn" href="#repeating-markers" id="ref-for-repeating-markers">repeating markers</a>, in order of their position along the path</p>
    <li data-md>
     <p>any <a data-link-type="dfn" href="#positioned-markers" id="ref-for-positioned-markers">positioned markers</a>, in document order of the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③">marker</a> element children</p>
   </ul>
   <h2 class="heading settled" data-level="2" id="MarkerElement"><span class="secno">2. </span><span class="content">The <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④">marker</a> element</span><a class="self-link" href="#MarkerElement"></a></h2>
   <table class="def elementdef">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled" data-dfn-type="element" data-export id="elementdef-marker"><code>marker</code></dfn>
     <tr>
      <th>Categories:
      <td> <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element">Container element</a> 
     <tr>
      <th>Contexts:
      <td>none 
     <tr>
      <th>Content model:
      <td>
        Any number of the following statements, in order: 
       <ul>
        <li><a data-link-type="dfn">animation elements</a>
        <li><a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#TermDescriptiveElement" id="ref-for-TermDescriptiveElement">descriptive elements</a>
        <li><a data-link-type="dfn" href="https://svgwg.org/svg2-draft/painting.html#TermPaintServerElement" id="ref-for-TermPaintServerElement">paint server elements</a>
        <li><a data-link-type="dfn" href="https://svgwg.org/svg2-draft/shapes.html#TermShapeElement" id="ref-for-TermShapeElement">shape elements</a>
        <li><a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#TermStructuralElement" id="ref-for-TermStructuralElement">structural elements</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/linking.html#elementdef-a" id="ref-for-elementdef-a">a</a>, <a data-link-type="element" href="https://drafts.fxtf.org/css-masking-1/#elementdef-clippath" id="ref-for-elementdef-clippath">clipPath</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG11/interact.html#CursorElement" id="ref-for-CursorElement">cursor</a>, <a data-link-type="element" href="https://drafts.fxtf.org/filter-effects-1/#elementdef-filter" id="ref-for-elementdef-filter">filter</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/embedded.html#elementdef-foreignObject" id="ref-for-elementdef-foreignObject">foreignObject</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/embedded.html#elementdef-image" id="ref-for-elementdef-image">image</a>, <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker⑤">marker</a>, <a data-link-type="element" href="https://drafts.fxtf.org/css-masking-1/#elementdef-mask" id="ref-for-elementdef-mask">mask</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/interact.html#elementdef-script" id="ref-for-elementdef-script">script</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/styling.html#elementdef-style" id="ref-for-elementdef-style">style</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-switch" id="ref-for-elementdef-switch">switch</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/text.html#elementdef-text" id="ref-for-elementdef-text">text</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/linking.html#elementdef-view" id="ref-for-elementdef-view">view</a>
       </ul>
     <tr>
      <th>Attributes:
      <td>
       <ul>
        <li><a data-element-attr-group data-link-type="dfn" href="https://svgwg.org/svg2-draft/styling.html#TermPresentationAttribute" id="ref-for-TermPresentationAttribute">presentation attributes</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-marker-refx" id="ref-for-element-attrdef-marker-refx">refX</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-marker-refy" id="ref-for-element-attrdef-marker-refy">refY</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-marker-orient" id="ref-for-element-attrdef-marker-orient">orient</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox">viewBox</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-marker-preserveaspectratio" id="ref-for-element-attrdef-marker-preserveaspectratio">preserveAspectRatio</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-marker-markerunits" id="ref-for-element-attrdef-marker-markerunits">markerUnits</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-marker-markerwidth" id="ref-for-element-attrdef-marker-markerwidth">markerWidth</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-marker-markerheight" id="ref-for-element-attrdef-marker-markerheight">markerHeight</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-marker-position" id="ref-for-element-attrdef-marker-position①">position</a>
        <li><a data-link-type="element-attr" href="#element-attrdef-marker-href" id="ref-for-element-attrdef-marker-href">href</a>
       </ul>
     <tr>
      <th>DOM Interfaces:
      <td> <a class="idl-code" data-link-type="interface" href="https://svgwg.org/svg2-draft/painting.html#InterfaceSVGMarkerElement" id="ref-for-InterfaceSVGMarkerElement">SVGMarkerElement</a> 
   </table>
   <p>The <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker⑥">marker</a> element defines the graphics that are to
be used for drawing markers on a <a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements">markable element</a>.</p>
   <p id="MarkerAttributes"><em>Attribute definitions:</em></p>
   <dl class="attrdef-list">
    <dt>
     <table class="attrdef">
      <tbody>
       <tr>
        <th>Name
        <th>Value
        <th>Initial value
        <th>Animatable
       <tr>
        <td><dfn class="dfn-paneled" data-dfn-for="marker" data-dfn-type="element-attr" data-export id="element-attrdef-marker-markerunits"><code>markerUnits</code></dfn>
        <td>strokeWidth | userSpaceOnUse
        <td>strokeWidth
        <td>yes
     </table>
    <dd>
     <p>The <a data-link-type="element-attr" href="#element-attrdef-marker-markerunits" id="ref-for-element-attrdef-marker-markerunits①">markerUnits</a> attribute defines the coordinate system for
  attributes <a data-link-type="element-attr" href="#element-attrdef-marker-markerwidth" id="ref-for-element-attrdef-marker-markerwidth①">markerWidth</a>, <a data-link-type="element-attr" href="#element-attrdef-marker-markerheight" id="ref-for-element-attrdef-marker-markerheight①">markerHeight</a> and the
  contents of the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker⑦">marker</a>.  Values have the
  following meanings:</p>
     <dl>
      <dt><dfn class="dfn-paneled css" data-dfn-for="markerUnits" data-dfn-type="value" data-export id="valdef-markerunits-strokewidth">strokeWidth</dfn>
      <dd><a data-link-type="element-attr" href="#element-attrdef-marker-markerwidth" id="ref-for-element-attrdef-marker-markerwidth②">markerWidth</a>, <a data-link-type="element-attr" href="#element-attrdef-marker-markerheight" id="ref-for-element-attrdef-marker-markerheight②">markerHeight</a> and the contents
    of the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker⑧">marker</a> represent values in a coordinate system
    which has a single unit equal the size in user units of the
    current stroke width (see the <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty">stroke-width</a> property) in
    place for the graphic object referencing the marker.
      <dt><dfn class="dfn-paneled css" data-dfn-for="markerUnits" data-dfn-type="value" data-export id="valdef-markerunits-userspaceonuse">userSpaceOnUse</dfn>
      <dd><a data-link-type="element-attr" href="#element-attrdef-marker-markerwidth" id="ref-for-element-attrdef-marker-markerwidth③">markerWidth</a>, <a data-link-type="element-attr" href="#element-attrdef-marker-markerheight" id="ref-for-element-attrdef-marker-markerheight③">markerHeight</a> and the contents
    of the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker⑨">marker</a> represent values in the current
    user coordinate system in place for the graphic object
    referencing the marker (i.e., the user coordinate system for
    the element referencing the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①⓪">marker</a> element via a <a class="property" data-link-type="propdesc" href="#propdef-marker" id="ref-for-propdef-marker">marker</a>).
     </dl>
    <dt>
     <table class="attrdef">
      <tbody>
       <tr>
        <th>Name
        <th>Value
        <th>Initial value
        <th>Animatable
       <tr>
        <td><dfn class="dfn-paneled" data-dfn-for="marker" data-dfn-type="element-attr" data-export id="element-attrdef-marker-markerwidth"><code>markerWidth</code></dfn>, <dfn class="dfn-paneled" data-dfn-for="marker" data-dfn-type="element-attr" data-export id="element-attrdef-marker-markerheight"><code>markerHeight</code></dfn>
        <td><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value">&lt;percentage></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value">&lt;number></a>
        <td>3
        <td>yes
     </table>
    <dd> The <a data-link-type="element-attr" href="#element-attrdef-marker-markerwidth" id="ref-for-element-attrdef-marker-markerwidth④">markerWidth</a> and <a data-link-type="element-attr" href="#element-attrdef-marker-markerheight" id="ref-for-element-attrdef-marker-markerheight④">markerHeight</a> attributes
  represent the size of the viewport into which the marker is to
  be fitted according to the <a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox①">viewBox</a> and <a data-link-type="element-attr">preserveAspectRatio</a> attributes.  A value of zero for either
  attribute results in nothing being rendered for the marker.  A negative value
  for either attribute is an error (see <a href="implnote.html#ErrorProcessing">Error processing</a>). 
    <dt>
     <table class="attrdef">
      <tbody>
       <tr>
        <th>Name
        <th>Value
        <th>Initial value
        <th>Animatable
       <tr>
        <td><dfn class="dfn-paneled" data-dfn-for="marker" data-dfn-type="element-attr" data-export id="element-attrdef-marker-refx"><code>refX</code></dfn>
        <td><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①">&lt;percentage></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①">&lt;number></a> | left | center | right
        <td>0
        <td>yes
       <tr>
        <td><dfn class="dfn-paneled" data-dfn-for="marker" data-dfn-type="element-attr" data-export id="element-attrdef-marker-refy"><code>refY</code></dfn>
        <td><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value②">&lt;percentage></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value②">&lt;number></a> | top | center | bottom
        <td>0
        <td>yes
     </table>
    <dd>
     <p class="note" role="note">New in SVG 2: geometric keywords (matches use in <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-symbol" id="ref-for-elementdef-symbol">symbol</a>).</p>
     <p class="annotation">We will add top/center/bottom, left/center/right keywords to
  refX/refY on marker/symbol. Resolved at <a href="http://www.w3.org/2014/08/26-svg-minutes.html#item07">LondonF2F</a>.
  Values inspired by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position">background-position</a>.</p>
     <p>The <a data-link-type="element-attr" href="#element-attrdef-marker-refx" id="ref-for-element-attrdef-marker-refx①">refX</a> and <a data-link-type="element-attr" href="#element-attrdef-marker-refy" id="ref-for-element-attrdef-marker-refy①">refY</a> attributes define the reference point of the marker which is to be placed exactly
  at the marker’s position on the <a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements①">markable element</a>.  They are interpreted as
  being in the coordinate system of the marker contents, after application of the <a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox②">viewBox</a> and <a data-link-type="element-attr">preserveAspectRatio</a> attributes.</p>
    <dt>
     <table class="attrdef">
      <tbody>
       <tr>
        <th>Name
        <th>Value
        <th>Initial value
        <th>Animatable
       <tr>
        <td><dfn class="dfn-paneled" data-dfn-for="marker" data-dfn-type="element-attr" data-export id="element-attrdef-marker-orient"><code>orient</code></dfn>
        <td>auto | auto-start-reverse | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value" title="Expands to: turn | rad | grad | deg">&lt;angle></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value③">&lt;number></a>
        <td>0
        <td>yes (non-additive)
     </table>
    <dd>
     <p>The <a data-link-type="element-attr" href="#element-attrdef-marker-orient" id="ref-for-element-attrdef-marker-orient①">orient</a> attribute indicates how the marker
  is rotated when it is placed at its position on the <a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements②">markable element</a>.
  Values have the following meaning:</p>
     <dl>
      <dt><span class="css">auto</span>
      <dd>
       <p>A value of <span class="css">auto</span> indicates that the marker is oriented such that its positive
      x-axis is pointing in the direction of the path at the point
      it is placed.</p>
       <p class="issue" id="issue-2a8a8ee0"><a class="self-link" href="#issue-2a8a8ee0"></a>This needs to reference a definition for how
      directionality of a given start/mid/end vertex is calculated.
      Part of that (which should be moved somewhere more appropriate) is in
      the <a href="implnote.html#PathElementImplementationNotes">path element implementation notes</a>.
      Some wording from SVG 1.1 appears to have been lost, compare with <a href="http://www.w3.org/TR/SVG11/painting.html#OrientAttribute">this</a>. <br><br> Here’s an example that is a bit unclear currently: <code style="white-space:pre"> &lt;svg>
  &lt;marker id="m" orient="auto" overflow="visible">
    &lt;rect x="-1" y="-0.5" width="1" height="1" fill="green"/>
  &lt;/marker>
  &lt;path d="M50,0C50,50 50,100 50,100" marker-end="url(#m)" stroke-width="100" stroke="red"/>
&lt;/svg> </code> <br> The second control point and the endpoint coincide, should this mean that the direction of the endpoint is a) <em>unknown [aka default to 0 degrees]</em> or
    b) <em>that you have to look at the previous segment(s)/command(s) until a direction can be established</em>? </p>
       <p>If the marker is a <a data-link-type="dfn" href="#segment-markers" id="ref-for-segment-markers">segment marker</a>, then
      the direction the marker is oriented is, if considering the
      incoming and outgoing directions as unit vectors, in the
      direction of the sum of these two vectors.  If this sum
      is zero, then the marker is oriented in the incoming direction.</p>
       <p>If the marker is on the first or last vertex of a closed subpath, then the
      incoming direction taken from the final path segment and the outgoing
      direction is taken from:</p>
       <ul>
        <li>the first path segment of the <em>following</em> subpath,
        if the following subpath does not begin with a <a href="paths.html#PathDataMovetoCommands">moveto</a> command, and
        <li>the first path segment of the <em>current</em> subpath,
        if the following subpath does begin with a <a href="paths.html#PathDataMovetoCommands">moveto</a> command
        or if there is no following subpath.
       </ul>
     </dl>
     <dl>
      <dt><span class="css">auto-start-reverse</span>
      <dd>
       <p>A value of <span class="css">auto-start-reverse</span> means the same as <span class="css">auto</span> except that
      for a marker placed by <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start④">marker-start</a>, the orientation is 180°
      different from the orientation as determined by <span class="css">auto</span>.</p>
       <p class="note" role="note">This allows a single arrowhead marker to be defined
      that can be used for both the start and end of a path, point in the right
      directions.</p>
     </dl>
     <dl>
      <dt><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①" title="Expands to: turn | rad | grad | deg">&lt;angle></a>
      <dt><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value④">&lt;number></a>
      <dd>
       <p>An <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value②" title="Expands to: turn | rad | grad | deg">&lt;angle></a> value represents the angle the marker’s
      positive x-axis makes with the positive x-axis in the user space
      of the <a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements③">markable element</a>, and a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑤">&lt;number></a> value
      with no unit represents an angle in degrees.  For example, if a value of <span class="css">0</span> is given, then the marker will be drawn
      such that its x-axis will align with the x-axis of the user
      space of the graphic object referencing the marker.
      A value of <span class="css">90deg</span> will result in the
      marker being drawn with its positive x-axis in the direction
      of the positive y-axis of the <a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements④">markable element</a>’s user space.</p>
     </dl>
     <p>The orientation occurs after the marker has been fitted into its
  viewport.  See the <a href="#MarkerAlgorithm">Details on how markers are rendered</a> section below for an illustrative example.</p>
    <dt>
     <table class="attrdef">
      <tbody>
       <tr>
        <th>Name
        <th>Value
        <th>Initial value
        <th>Animatable
       <tr>
        <td><dfn class="dfn-paneled" data-dfn-for="marker" data-dfn-type="element-attr" data-export id="element-attrdef-marker-position"><code>position</code></dfn>
        <td><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value③">&lt;percentage></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑥">&lt;number></a>
        <td>as if not specified
        <td>yes
     </table>
    <dd>
     <p>If the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①①">marker</a> element is a child of a <a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements⑤">markable element</a>,
  then the presence of a  attribute indicates that the marker is
  a <a data-link-type="dfn" href="#positioned-markers" id="ref-for-positioned-markers①">positioned marker</a> and that it will be painted at the specified
  distance along the path.  If the value is negative or greater than the length
  of the path, then no marker will be painted.  If this attribute is specified on
  a <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①②">marker</a> that is not a child of a <a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements⑥">markable element</a>, then
  it has no effect beyond being exposed in the DOM.</p>
     <p class="issue" id="issue-79ea2baa"><a class="self-link" href="#issue-79ea2baa"></a>Should a negative or greater than path length value be
  an "in error" / "unsupported" value?</p>
    <dt>
     <table class="attrdef">
      <tbody>
       <tr>
        <th>Name
        <th>Value
        <th>Initial value
        <th>Animatable
       <tr>
        <td><dfn class="dfn-paneled" data-dfn-for="marker" data-dfn-type="element-attr" data-export id="element-attrdef-marker-href"><code>href</code></dfn>
        <td>URL <a data-link-type="biblio" href="#biblio-url">[URL]</a>
        <td>as if not specified
        <td>yes
     </table>
    <dd>
     <p>When a <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①③">marker</a> element is being used as a <a data-link-type="dfn" href="#positioned-markers" id="ref-for-positioned-markers②">positioned marker</a>,
  the <a data-link-type="element-attr" href="#element-attrdef-marker-href" id="ref-for-element-attrdef-marker-href①">href</a> attribute indicates that the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①④">marker</a> referenced by the attribute is to be used as the definition of the marker.  The
  graphical content of the referencing <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①⑤">marker</a> element and any of
  its attributes that affect marker processing are ignored.  Authors must not
  place any child graphical content in the referencing <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①⑥">marker</a> or
  specify the <a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox③">viewBox</a>, <a data-link-type="element-attr">preserveAspectRatio</a>, <a data-link-type="element-attr" href="#element-attrdef-marker-refx" id="ref-for-element-attrdef-marker-refx②">refX</a>, <a data-link-type="element-attr" href="#element-attrdef-marker-refy" id="ref-for-element-attrdef-marker-refy②">refY</a>, <a data-link-type="element-attr" href="#element-attrdef-marker-markerunits" id="ref-for-element-attrdef-marker-markerunits②">markerUnits</a>, <a data-link-type="element-attr" href="#element-attrdef-marker-markerwidth" id="ref-for-element-attrdef-marker-markerwidth⑤">markerWidth</a>, <a data-link-type="element-attr" href="#element-attrdef-marker-markerheight" id="ref-for-element-attrdef-marker-markerheight⑤">markerHeight</a> or <a data-link-type="element-attr" href="#element-attrdef-marker-orient" id="ref-for-element-attrdef-marker-orient②">orient</a> attributes on it.</p>
     <p class="issue" id="issue-e5f3570c"><a class="self-link" href="#issue-e5f3570c"></a>We should say something about referencing <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①⑦">marker</a> elements that have an <a data-link-type="element-attr" href="#element-attrdef-marker-href" id="ref-for-element-attrdef-marker-href②">href</a> with the <a data-link-type="dfn" href="#marker-properties" id="ref-for-marker-properties">marker properties</a>.
  I suspect we should just allow this.  Whether we want to allow the full
  element-referencing thing that you can do with gradients, with selective
  overriding of attributes, I’m not sure.</p>
    <dt>
     <table class="attrdef">
      <tbody>
       <tr>
        <th>Name
        <th>Value
        <th>Initial value
        <th>Animatable
       <tr>
        <td><dfn class="dfn-paneled" data-dfn-for="marker" data-dfn-type="element-attr" data-export id="element-attrdef-marker-viewbox"><code>viewBox</code></dfn>
        <td>see prose
        <td>see prose
        <td>see prose
     </table>
    <dd>
     <p>The <a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox④">viewBox</a> attribute is defined be SVG. See ‘<a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#PreserveAspectRatioAttribute">The viewBox attribute</a>’ <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>.</p>
    <dt>
     <table class="attrdef">
      <tbody>
       <tr>
        <th>Name
        <th>Value
        <th>Initial value
        <th>Animatable
       <tr>
        <td><dfn class="dfn-paneled" data-dfn-for="marker" data-dfn-type="element-attr" data-export id="element-attrdef-marker-preserveaspectratio"><code>preserveAspectRatio</code></dfn>
        <td>see prose
        <td>see prose
        <td>see prose
     </table>
    <dd>
     <p>The <a data-link-type="element-attr" href="#element-attrdef-marker-preserveaspectratio" id="ref-for-element-attrdef-marker-preserveaspectratio①">preserveAspectRatio</a> attribute is defined be SVG. See ‘<a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#PreserveAspectRatioAttribute">The preserveAspectRatio attribute</a>’ <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>.</p>
   </dl>
   <p>The contents of the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①⑧">marker</a> are relative to a new
coordinate system. The <a data-link-type="element-attr" href="#element-attrdef-marker-markerunits" id="ref-for-element-attrdef-marker-markerunits③">markerUnits</a> attribute
determines an initial scale factor for transforming the graphics in the marker
into the user coordinate system for the referencing element. An additional set of
transformations might occur if there is a <a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox⑤">viewBox</a> attribute, in which case the coordinate system for the contents of the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker①⑨">marker</a> will be transformed due to the processing of attributes <a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox⑥">viewBox</a> and <a data-link-type="element-attr">preserveAspectRatio</a>.
If there is no <a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox⑦">viewBox</a> attribute, then the assumed default value for the <a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox⑧">viewBox</a> attribute has the origin of the viewBox coincident with the origin
of the viewport and the width/height of the viewBox the same as the
width/height of the viewport.</p>
   <p>The <a href="styling.html#UAStyleSheet">user agent style sheet</a> sets
the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> property for <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②⓪">marker</a> elements to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden" id="ref-for-valdef-overflow-hidden">hidden</a>, which causes a rectangular clipping
path to be created at the bounds of marker’s viewport.  Unless the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①">overflow</a> property is overridden, any graphics within the marker which
goes outside of the marker’s viewport will be clipped.</p>
   <p><a href="styling.html#SVGStylingProperties">Properties</a> inherit into the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②①">marker</a> element from its ancestors; properties do <em>not</em> inherit from the element referencing the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②②">marker</a> element.</p>
   <p class="note" role="note"><span>Note:</span> By using the <span class="css">context-stroke</span> value for the <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillProperty" id="ref-for-FillProperty">fill</a> or <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeProperty" id="ref-for-StrokeProperty">stroke</a> on elements in its definition, a single marker can be designed to match the
style of the element referencing the marker.</p>
   <p><a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②③">marker</a> elements are only rendered directly
when they are used as children of a <a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements⑦">markable element</a> and have a <a data-link-type="element-attr" href="#element-attrdef-marker-position" id="ref-for-element-attrdef-marker-position②">position</a> attribute specified.  This causes the
marker to be painted as a <a data-link-type="dfn" href="#positioned-markers" id="ref-for-positioned-markers③">positioned marker</a>.  All other <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②④">marker</a> elements are not rendered directly
and must be referenced by one of the <a data-link-type="dfn" href="#marker-properties" id="ref-for-marker-properties①">marker properties</a> to be rendered.  The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a> property does not apply to the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②⑤">marker</a> element; thus, <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②⑥">marker</a> elements are not
directly rendered even if the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display①">display</a> property is
set to a value other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none">none</a>, and <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②⑦">marker</a> elements are available for referencing even when the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display②">display</a> property on the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②⑧">marker</a> element or any of its
ancestors is set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none①">none</a>. <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker②⑨">marker</a> elements that are used as <a data-link-type="dfn" href="#positioned-markers" id="ref-for-positioned-markers④">positioned markers</a> can simultaneously be referenced
by the <a data-link-type="dfn" href="#marker-properties" id="ref-for-marker-properties②">marker properties</a> to be used as <a data-link-type="dfn" href="#segment-markers" id="ref-for-segment-markers①">segment markers</a> and <a data-link-type="dfn" href="#repeating-markers" id="ref-for-repeating-markers①">repeating markers</a>.</p>
   <p><a href="interact.html#EventAttributes">Event attributes</a> and <a href="svgdom.html#EventListeners">event listeners</a> attached
to the contents of a <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③⓪">marker</a> element are not processed;
only the rendering aspects of <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③①">marker</a> elements are
processed.</p>
   <p class="issue" id="issue-cbf39201"><a class="self-link" href="#issue-cbf39201"></a> Make interaction work on <a data-link-type="dfn" href="#positioned-markers" id="ref-for-positioned-markers⑤">positioned markers</a>.</p>
   <div class="example" id="example-57d2cf19">
    <a class="self-link" href="#example-57d2cf19"></a> 
    <p>The following example shows the use of <a data-link-type="dfn" href="#positioned-markers" id="ref-for-positioned-markers⑥">positioned markers</a> to
  place symbols at particular distances along a path.</p>
<pre><code class="html">&lt;svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="200" viewBox="0 0 600 200">

   &lt;defs>
     &lt;marker id="Square" markerWidth="10" markerHeight="10"
             refX="5" refY="5" orient="auto">
       &lt;path d="M 5,1 L 9,5 5,9 1,5 z" fill="#6a9100"/>
     &lt;/marker>
     &lt;marker id="Circle" markerWidth="10" markerHeight="10"
             refX="5" refY="5" orient="auto">
       &lt;circle cx="5" cy="5" r="2" fill="dodgerblue"/>
     &lt;/marker>
   &lt;/defs>

   &lt;path d="M 100,50 C 100,250 500,-50 300,150"
         fill="none" stroke="deeppink" stroke-width="3">
     &lt;marker href="#Square" position="0"/>
     &lt;marker href="#Square" position="100%"/>
     &lt;marker href="#Circle" position="50px"/>
     &lt;marker href="#Circle" position="calc(100% - 50px)"/>
     &lt;marker refX="5" refY="5" position="50%">
       &lt;!-- the cross -->
       &lt;path d="M 3,3 L 7,7 M 3,7 L 7,3"
             fill="none" stroke="black" stroke-width="2"/>
     &lt;/marker>
   &lt;/path>
&lt;/svg>
</code></pre>
    <div class="figure">
      <img alt="Image showing the use of positioned markers." class="bordered" src="images/markers-positioned.svg"> 
     <p class="caption">Child <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③②">marker</a> elements are used to position
    two square and two circular markers.  The cross marker is defined inline
    and does not need an ID.</p>
    </div>
   </div>
   <h2 class="heading settled" data-level="3" id="MarkerReferences"><span class="secno">3. </span><span class="content">Referencing <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③③">marker</a> elements</span><a class="self-link" href="#MarkerReferences"></a></h2>
   <p>A number of marker properties allow specifying a <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③④">marker</a> using a <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef">&lt;marker-ref></a> value.</p>
   <div class="definition">
     <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="DataTypeMarkerRef">&lt;marker-ref></dfn> =<br> 
    <div style="margin-left: 2em"> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value">&lt;url></a> |<br> child |<br> <a class="production css" data-link-type="type" href="#typedef-child-selector" id="ref-for-typedef-child-selector">&lt;child-selector></a> </div>
   </div>
   <p>where:</p>
   <div class="definition">
     <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-child-selector">&lt;child-selector></dfn> = 
    <div style="margin-left: 4em">select(<a href="http://www.w3.org/TR/selectors4/#compound">&lt;compound selector></a> #)</div>
   </div>
   <p>Values have the following meaning</p>
   <dl>
    <dt><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value①">&lt;url></a>
    <dd>Indicates that the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③⑤">marker</a> element referenced
  by the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value②">&lt;url></a> value will be used.
  If the <a href="linking.html#URLReference">URL reference</a> is not valid
  (e.g., it points to an object that is undefined or the object is not
  a <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③⑥">marker</a> element), then the marker reference is also not
  valid.
    <dt><a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/fill-stroke-3/#valdef-svg-paint-child" id="ref-for-valdef-svg-paint-child">child</a>
    <dd>Indicates that the last child <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③⑦">marker</a> element of the
  element where the property is specified will be used.
  If there is no such element, then the reference is not valid.
    <dt><a class="production css" data-link-type="type" href="#typedef-child-selector" id="ref-for-typedef-child-selector①">&lt;child-selector></a>
    <dd>Indicates that the first matching descendent <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③⑧">marker</a> specified by the <a class="production css" data-link-type="type" href="#typedef-child-selector" id="ref-for-typedef-child-selector②">&lt;child-selector></a>, applied in the context of the
  element where the property is specified, will be used.
  If no element matches any of the selectors contained in the <a class="production css" data-link-type="type" href="#typedef-child-selector" id="ref-for-typedef-child-selector③">&lt;child-selector></a>>, or the first match is not a <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker③⑨">marker</a>, then the reference is not valid.
   </dl>
   <h2 class="heading settled" data-level="4" id="VertexMarkerProperties"><span class="secno">4. </span><span class="content">Vertex markers: the <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start⑤">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid③">marker-mid</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end③">marker-end</a> properties</span><a class="self-link" href="#VertexMarkerProperties"></a></h2>
   <table class="def propdef" data-link-for-hint="marker-start">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-marker-start">marker-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-marker-mid">marker-mid</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-marker-end">marker-end</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①">&lt;marker-ref></a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements⑧">markable elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified, but with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value③">&lt;url></a> values (that are part of a <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef②">&lt;marker-ref></a>) made absolute
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>yes
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start⑥">marker-start</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end④">marker-end</a> properties are used
to specify the marker that will be drawn at the first and last vertices
of the given <a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements⑨">markable element</a>, respectively. <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid④">marker-mid</a> is used to specify the marker that will be drawn at all other vertices
(i.e., every vertex except the first and last).
Possible values for <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start⑦">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid⑤">marker-mid</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end⑤">marker-end</a> are:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="marker-start" data-dfn-type="value" data-export id="valdef-marker-start-none">none</dfn>
    <dd>Indicates that no marker symbol will be drawn at the given
  vertex or vertices.
    <dt><dfn class="css" data-dfn-for="marker-start" data-dfn-type="value" data-export id="valdef-marker-start-marker-ref">&lt;marker-ref><a class="self-link" href="#valdef-marker-start-marker-ref"></a></dfn>
    <dd>Indicates that the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④⓪">marker</a> element referenced
  by the <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef③">&lt;marker-ref></a> value will be drawn at the given vertex or
  vertices.
  If the reference is not valid, then no marker will be drawn at the given
  vertex or vertices.
   </dl>
   <p>For <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polygon" id="ref-for-elementdef-polygon②">polygon</a> elements, the last vertex is the same as the first
vertex, and for <a data-link-type="element" href="https://svgwg.org/svg2-draft/paths.html#elementdef-path" id="ref-for-elementdef-path②">path</a> elements that end with a closed subpath, the last
vertex is the same as the first vertex of that final subpath.
In this case, if the value of <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end⑥">marker-end</a> is not <a class="css" data-link-type="maybe" href="#valdef-marker-start-none" id="ref-for-valdef-marker-start-none">none</a>, then it is possible that two markers
will be rendered on that final vertex.</p>
   <p class="note" role="note"><span>Note:</span> <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start⑧">marker-start</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end⑦">marker-end</a> refer to the first and last vertex of the entire path, not each subpath.</p>
   <div class="example" id="example-afed451f">
    <a class="self-link" href="#example-afed451f"></a> 
    <p>The following example shows a triangular marker symbol used as a <a data-link-type="dfn" href="#vertex-markers" id="ref-for-vertex-markers">vertex marker</a> to form an arrowhead at the end of two paths.</p>
<pre><code class="html">&lt;svg xmlns="http://www.w3.org/2000/svg"
     width="275" height="200" viewBox="0 0 275 200">
  &lt;defs>
    &lt;marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
            markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
            orient="auto">
      &lt;path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/>
    &lt;/marker>
  &lt;/defs>

  &lt;g fill="none" stroke-width="10" marker-end="url(#Triangle)">
    &lt;path stroke="crimson" d="M 100,75 C 125,50 150,50 175,75"/>
    &lt;path stroke="olivedrab" d="M 175,125 C 150,150 125,150 100,125"/>
  &lt;/g>
&lt;/svg>
</code></pre>
    <div class="figure">
      <img alt="Image showing the use of an automatically oriented marker." class="bordered" src="images/marker-rendering.svg"> 
     <p class="caption">The triangle is placed at the end of the path and
    oriented automatically so that it points in the right direction.
    The use of <span class="css">context-stroke</span> ensures
    the fill of the triangle matches the stroke of each <a data-link-type="element" href="https://svgwg.org/svg2-draft/paths.html#elementdef-path" id="ref-for-elementdef-path③">path</a>.</p>
    </div>
   </div>
   <h2 class="heading settled" data-level="5" id="SegmentMarkers"><span class="secno">5. </span><span class="content">Segment markers: the <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment③">marker-segment</a> property</span><a class="self-link" href="#SegmentMarkers"></a></h2>
   <table class="def propdef" data-link-for-hint="marker-segment">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-marker-segment">marker-segment</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef④">&lt;marker-ref></a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements①⓪">markable elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified, but with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value④">&lt;url></a> values (that are part of a <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef⑤">&lt;marker-ref></a>) made absolute
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>yes
   </table>
   <p class="note" role="note"><span>Note:</span> New in SVG 2. Added to allow automatically placing marker symbols
on path edges, as is common in for example line graphs.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment④">marker-segment</a> property is used to specify the marker that will
be drawn at the center of each length path segment.  Possible values
are:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="marker-segment" data-dfn-type="value" data-export id="valdef-marker-segment-none">none<a class="self-link" href="#valdef-marker-segment-none"></a></dfn>
    <dd>Indicates that no marker symbol will be drawn at the given
  vertex or vertices.
    <dt><dfn class="css" data-dfn-for="marker-segment" data-dfn-type="value" data-export id="valdef-marker-segment-marker-ref">&lt;marker-ref><a class="self-link" href="#valdef-marker-segment-marker-ref"></a></dfn>
    <dd>Indicates that the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④①">marker</a> element referenced
  by the <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef⑥">&lt;marker-ref></a> value will be drawn at the center
  of each path segment.
  If the reference is not valid, then no marker will be drawn at the path
  segment centers.
   </dl>
   <div class="example" id="example-3a5dbc22">
    <a class="self-link" href="#example-3a5dbc22"></a> 
    <p>The following example shows the use of both <a data-link-type="dfn" href="#vertex-markers" id="ref-for-vertex-markers①">vertex markers</a> and <a data-link-type="dfn" href="#segment-markers" id="ref-for-segment-markers②">segment markers</a> to construct a line graph.</p>
<pre><code class="html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">

  &lt;marker id="Circle" markerWidth="8" markerHeight="8" refX="4" refY="4"
          markerUnits="userSpaceOnUse">
    &lt;circle cx="4" cy="4" r="3" fill="deeppink"/>
  &lt;/marker>

  &lt;marker id="Cross" markerWidth="10" markerHeight="10" refX="0" refY="0"
          viewBox="-5 -5 10 10" markerUnits="userSpaceOnUse"
          fill="none">
    &lt;path d="M -4,-4 L 4,4 M -4,4 L 4,-4" stroke="white" stroke-width="4"/>
    &lt;path d="M -4,-4 L 4,4 M -4,4 L 4,-4" stroke="black" stroke-width="2"/>
  &lt;/marker>

  &lt;!-- grid lines -->
  &lt;path stroke="#888" d="M 40,20 360,20 M 40,40 360,40 M 40,60 360,60
                         M 40,80 360,80 M 40,100 360,100 M 40,120 360,120
                         M 40,140 360,140 M 40,160 360,160 M 40,180 360,180"/>

  &lt;!-- the graph line -->
  &lt;polyline points="50,100 100,20 150,50 200,130 250,80 300,170 350,100"
            fill="none" stroke="deeppink" stroke-width="2"
            marker="url(#Circle)" marker-segment="url(#Cross)"/>
&lt;/svg>
</code></pre>
    <div class="figure">
      <img alt="Image showing the use of segment markers." class="bordered" src="images/markers-segment.svg"> 
     <p class="caption">Segment markers are used to place crosses at the center
    of each line segment in the line graph.</p>
    </div>
   </div>
   <h2 class="heading settled" data-level="6" id="RepeatingMarkers"><span class="secno">6. </span><span class="content">Repeating markers: the <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern③">marker-pattern</a> property</span><a class="self-link" href="#RepeatingMarkers"></a></h2>
   <table class="def propdef" data-link-for-hint="marker-pattern">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-marker-pattern">marker-pattern</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-marker-gap" id="ref-for-typedef-marker-gap">&lt;marker-gap></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a class="production css" data-link-type="type" href="#typedef-marker-ref-group" id="ref-for-typedef-marker-ref-group">&lt;marker-ref-group></a> [ <a class="production css" data-link-type="type" href="#typedef-marker-gap" id="ref-for-typedef-marker-gap①">&lt;marker-gap></a> <a class="production css" data-link-type="type" href="#typedef-marker-gap" id="ref-for-typedef-marker-gap②">&lt;marker-gap></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus">*</a> <a class="production css" data-link-type="type" href="#typedef-marker-gap" id="ref-for-typedef-marker-gap③">&lt;marker-gap></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements①①">markable elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified, but with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value⑤">&lt;url></a> values (that are part of a <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef⑦">&lt;marker-ref></a>) made absolute
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>yes
   </table>
   <p>where:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-marker-gap">&lt;marker-gap></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value④" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value④">&lt;percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑦">&lt;number></a></pre>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-marker-ref-group">&lt;marker-ref-group></dfn> = <a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none">none</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> <a class="production" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef⑧">&lt;marker-ref></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus">+</a></pre>
   <p class="note" role="note"><span>Note:</span> New in SVG 2. Added to allow markers to be placed along a path
at positions unrelated to the segments used to form the path.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern④">marker-pattern</a> property is used to specify a pattern
of markers and gaps to be repeated along the length of the <a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements①②">markable element</a>.
Values have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="marker-pattern" data-dfn-type="value" data-export id="valdef-marker-pattern-none">none</dfn>
    <dd>Indicates that no marker will be painted at the current
  position along the path.
    <dt><a class="production css" data-link-type="type" href="#typedef-marker-gap" id="ref-for-typedef-marker-gap④">&lt;marker-gap></a>
    <dd>Indicates the length of a gap in the repeated
  pattern of markers.
    <dt><a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef⑨">&lt;marker-ref></a>
    <dd>A reference to a <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④②">marker</a> that will be placed at the
  current position along the path.  If the reference is not valid, then no
  marker for that <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①⓪">&lt;marker-ref></a> will be painted.
   </dl>
   <p>If a value other than <a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none①">none</a> is given,
and the sum of the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value⑤" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>s, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑤">&lt;percentage></a>s
and <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑧">&lt;number></a>s is not positive, then it is an <a href="http://www.w3.org/TR/SVG2/intro.html#TermInvalidValue">invalid value</a>.</p>
   <p></p>
   <p>Unlike <a data-link-type="dfn" href="#vertex-markers" id="ref-for-vertex-markers②">vertex markers</a>, the orientation of an ''orient="auto"'' <a data-link-type="dfn" href="#repeating-markers" id="ref-for-repeating-markers②">repeating marker</a> that happens to lie on a vertex does not take into
account the incoming and outgoing directions.  Instead, it is simply oriented
such that its positive x-axis is aligned with the direction of the path
at its position.</p>
   <div class="example" id="example-b321fc99">
    <a class="self-link" href="#example-b321fc99"></a> 
    <p>The following example shows the use of the <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern⑤">marker-pattern</a> property
  to specify a repeating pattern of two different markers spaced along a
  path.</p>
<pre><code class="html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="600" height="200">

  &lt;marker id="DoubleDash" markerWidth="8" markerHeight="12" refX="0" refY="0"
          viewBox="-4 -6 8 12" markerUnits="userSpaceOnUse" orient="auto">
    &lt;rect x="-3" y="-5" width="2" height="10"/>
    &lt;rect x="1" y="-5" width="2" height="10"/>
  &lt;/marker>
  &lt;marker id="SingleDash" markerWidth="4" markerHeight="12" refX="0" refY="0"
          viewBox="-2 -6 4 12" markerUnits="userSpaceOnUse" orient="auto">
    &lt;rect x="-1" y="-5" width="2" height="10"/>
  &lt;/marker>

  &lt;path d="M 50,100 S 100,132 150,86 200,173 250,76 300,81
                      350,136 400,87 450,166 500,87 550,96"
        stroke="deeppink" stroke-width="2" fill="none"
        marker-pattern="40 url(#DoubleDash) 40 url(#SingleDash)"/>
&lt;/svg>
</code></pre>
    <div class="figure">
      <img alt="Image showing the use of repeating markers." class="bordered" src="images/markers-repeating.svg"> 
     <p class="caption">Markers specified with the <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern⑥">marker-pattern</a> property
    are placed along the path at fixed distances, not relative to the path
    vertices.</p>
    </div>
   </div>
   <h2 class="heading settled" data-level="7" id="MarkerShorthand"><span class="secno">7. </span><span class="content">Marker shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-marker" id="ref-for-propdef-marker①">marker</a> property</span><a class="self-link" href="#MarkerShorthand"></a></h2>
   <table class="def propdef" data-link-for-hint="marker">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-marker">marker</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">
       <div>[ none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①①">&lt;marker-ref></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,4}</a> [ / <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern⑦">marker-pattern</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> </div>
       <div style="margin-left: 2em"> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①②">&lt;marker-ref></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range①">{0,4}</a> [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value⑥" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑥">&lt;percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value⑨">&lt;number></a> ] [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value⑦" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑦">&lt;percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⓪">&lt;number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①③">&lt;marker-ref></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus①">*</a></div>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="#markable-elements" id="ref-for-markable-elements①③">markable elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>see individual properties
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-marker" id="ref-for-propdef-marker②">marker</a> property sets values for the <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start⑨">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid⑥">marker-mid</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end⑧">marker-end</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment⑤">marker-segment</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern⑧">marker-pattern</a> properties.
Values for have the following meanings:</p>
   <dl>
    <dt><a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none②">none</a> | <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①④">&lt;marker-ref></a>
    <dd>Sets <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start①⓪">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid⑦">marker-mid</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end⑨">marker-end</a> to the specified value, and sets <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment⑥">marker-segment</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern⑨">marker-pattern</a> to <a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none③">none</a>.
    <dt>[ <a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none④">none</a> | <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①⑤">&lt;marker-ref></a> ]{2}
    <dd>Sets <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start①①">marker-start</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end①⓪">marker-end</a> to the two
  values specified, and sets <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid⑧">marker-mid</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment⑦">marker-segment</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern①⓪">marker-pattern</a> to <a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none⑤">none</a>.
    <dt>[ <a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none⑥">none</a> | <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①⑥">&lt;marker-ref></a> ]{3}
    <dd>Sets <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start①②">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid⑨">marker-mid</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end①①">marker-end</a> to
  the three values specified, and sets <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment⑧">marker-segment</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern①①">marker-pattern</a> to <a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none⑦">none</a>.
    <dt>[ <a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none⑧">none</a> | <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①⑦">&lt;marker-ref></a> ]{4}
    <dd>Sets <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start①③">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment⑨">marker-segment</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid①⓪">marker-mid</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end①②">marker-end</a> to the four <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①⑧">&lt;marker-ref></a> values
  specified, and sets <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern①②">marker-pattern</a> to <a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none⑨">none</a>.
    <dt>[ <a class="css" data-link-type="maybe" href="#valdef-marker-pattern-none" id="ref-for-valdef-marker-pattern-none①⓪">none</a> | <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef①⑨">&lt;marker-ref></a> ]{1,4} / <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern①③">marker-pattern</a>
    <dd>Sets <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start①④">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment①⓪">marker-segment</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid①①">marker-mid</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end①③">marker-end</a> to the four <a class="production css" data-link-type="type" href="#DataTypeMarkerRef" id="ref-for-DataTypeMarkerRef②⓪">&lt;marker-ref></a> values
  specified before the slash, and sets <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern①④">marker-pattern</a> to
  the value after the slash.
    <dt>anything else
    <dd>Sets <a class="property" data-link-type="propdesc" href="#propdef-marker-start" id="ref-for-propdef-marker-start①⑤">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment①①">marker-segment</a>, <a class="property" data-link-type="propdesc" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid①②">marker-mid</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-end" id="ref-for-propdef-marker-end①④">marker-end</a> to <a class="css" data-link-type="maybe" href="#valdef-marker-start-none" id="ref-for-valdef-marker-start-none①">none</a>,
  and sets <a class="property" data-link-type="propdesc" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern①⑤">marker-pattern</a> to the specified value.
   </dl>
   <h2 class="heading settled" data-level="8" id="MarkerKnockout"><span class="secno">8. </span><span class="content">Knocking out the stroke: the <a class="property" data-link-type="propdesc" href="#propdef-marker-knockout-left" id="ref-for-propdef-marker-knockout-left">marker-knockout-left</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-knockout-right" id="ref-for-propdef-marker-knockout-right">marker-knockout-right</a> properties</span><a class="self-link" href="#MarkerKnockout"></a></h2>
   <p class="issue" id="issue-37a27154"><a class="self-link" href="#issue-37a27154"></a> The marker knockout properties are still under heavy development
and are subject to change. Feedback on how authors might prefer to specify marker
knockout shapes is welcome.</p>
   <table class="def propdef" data-link-for-hint="marker-knockout-left">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-marker-knockout-left">marker-knockout-left</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-marker-knockout-right">marker-knockout-right</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-knockout-offset" id="ref-for-typedef-knockout-offset">&lt;knockout-offset></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> <a class="production css" data-link-type="type" href="#typedef-knockout-shape" id="ref-for-typedef-knockout-shape">&lt;knockout-shape></a> [ at <a class="production css" data-link-type="type" href="#typedef-knockout-offset" id="ref-for-typedef-knockout-offset①">&lt;knockout-offset></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0
     <tr>
      <th>Applies to:
      <td><a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④③">marker</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see prose
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>yes
   </table>
   <p>where:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-knockout-offset">&lt;knockout-offset></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value⑧" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑧">&lt;percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①①">&lt;number></a></pre>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-knockout-shape">&lt;knockout-shape></dfn> =[ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value⑨" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value⑨">&lt;percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①②">&lt;number></a> ] inverted<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> circle <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a>
[ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①⓪" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①⓪">&lt;percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①③">&lt;number></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num" id="ref-for-mult-num">{2}</a> inverted<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> ellipse <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a>
[ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①①">&lt;percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①④">&lt;number></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range②">{1,2}</a> inverted<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</a> [ rectangle <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> triangle ]
</pre>
   <p class="note" role="note"><span>Note:</span> New in SVG 2.  Added to allow authors to specify
parts of a stroke that should be clipped away when a marker is
placed on a path.  This helps with arrowheads, where the stroke
must not be visible behind the pointy end, and with hollow markers
as seen in metro maps, where the center of a marker is transparent
and the stroke should not show through.</p>
   <p>When specified on a <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④④">marker</a> element, the <a class="property" data-link-type="propdesc" href="#propdef-marker-knockout-left" id="ref-for-propdef-marker-knockout-left①">marker-knockout-left</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-knockout-right" id="ref-for-propdef-marker-knockout-right①">marker-knockout-right</a> properties
together specify a shape to clip away when when painting the stroke of an
element that uses the marker. <a class="property" data-link-type="propdesc" href="#propdef-marker-knockout-left" id="ref-for-propdef-marker-knockout-left②">marker-knockout-left</a> specifies the
left side of the shape and <a class="property" data-link-type="propdesc" href="#propdef-marker-knockout-right" id="ref-for-propdef-marker-knockout-right②">marker-knockout-right</a> the right side.
These two sides are joined together with straight lines.</p>
   <p>The <a class="production css" data-link-type="type" href="#typedef-knockout-offset" id="ref-for-typedef-knockout-offset②">&lt;knockout-offset></a> part of the value, if specified,
is the offset from the marker position, outwards, along the tangent,
that the knockout shape side is placed at.  This is the <em>knockout shape
side position</em>.  If it is omitted, then the offset is assumed to be zero.
The value can be negative.  Percentage values refer to the width of the marker
contents viewport.</p>
   <p>The <a class="production css" data-link-type="type" href="#typedef-knockout-shape" id="ref-for-typedef-knockout-shape①">&lt;knockout-shape></a> part of the value, if specified,
is the left or right side of the knockout shape. Values have the
following meanings:</p>
   <dl>
    <dt>[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①②">&lt;percentage></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⑤">&lt;number></a> ]{2} inverted? ellipse
    <dd>
     <p>The knockout shape side is an arc.  The lengths or percentages specified
    are the x-radius and y-radius of the ellipse from which the arc is taken.
    A length is interpreted as being in the marker contents coordinate system.
    If the first value is a percentage, then it refers to the width of the
    marker contents viewport, and if the second value is a percentage then
    it refers to the height of the marker contents viewport.</p>
     <p>If the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-5/#valdef-media-inverted-colors-inverted" id="ref-for-valdef-media-inverted-colors-inverted">inverted</a> keyword is not specified,
    then the arc is constructed by placing the center of the ellipse at the knockout
    shape side position.  First we consider only the 180° arc of the ellipse which
    points in the direction of the start of the start of the path, if this is
    the left knockout shape side, or the end of the path if this is the right knockout
    shape side.  If the y-radius is less than or equal to half of the stroke width of
    the path the marker is on, then this 180° arc is the final knockout shape side.
    Otherwise, we intersect the arc with the two lines that are offset, by half
    of the stroke width, from the tangent to the marker orientation.
    The resulting arc with its start and end points on these two lines is the
    final knockout shape side.</p>
     <p>If the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-5/#valdef-media-inverted-colors-inverted" id="ref-for-valdef-media-inverted-colors-inverted①">inverted</a> keyword <em>is</em> specified,
    then the arc is constructed by placing the center of the ellipse at a distance
    of two times its x-radius along the tangent to the marker orientation,
    in the direction of the start of the path if this is the left knockout shape
    side, or the end of the path if this is the right knockout shape side.
    We consider only the 180° arc of the ellipse that is pointing in the opposite
    direction.  If the y-radius is less or equal to half of the stroke width
    of the path the marker is on, then this 180° arc is the final knockout shape
    side.  Otherwise, we intersect the arc with the two lines that are offset,
    by half of the stroke width, from the tangent to the marker orientation.
    The resulting arc with its side and end points on these two lines
    is the final knockout shape side.</p>
    <dt>[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①③">&lt;percentage></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⑥">&lt;number></a> ] inverted? circle
    <dd>
     <p>The knockout shape side is an arc.  The shape is computed in the same
    way as the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-images-3/#valdef-ending-shape-ellipse" id="ref-for-valdef-ending-shape-ellipse">ellipse</a> shape, but with
    both radii of the ellipse being the specified length or percentage,
    and with a percentage referring to the size of the marker contents viewport.</p>
    <dt>[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①④" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①④">&lt;percentage></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⑦">&lt;number></a> ]{1,2} inverted? rectangle
    <dd>
     <p>The knockout shape side comprises one or two rectangles.  These
    rectangles are aligned such that their top and bottom edges are
    parallel to the tangent to the marker orientation.
    The length or percentage is a width and the second, if specified,
    is a height.  Percentage values here refer to the width and height
    of the marker contents viewport, respectively.</p>
     <p>If the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-5/#valdef-media-inverted-colors-inverted" id="ref-for-valdef-media-inverted-colors-inverted②">inverted</a> keyword is not specified,
    then the knockout shape side is a single rectangle.  The width of the
    rectangle is the specified width value.  The height of the rectangle is the maximum
    of the stroke width of the path on which the marker exists and the specified
    height value, if it is specified.  If it is not specified, then the height of the
    rectangle is just the stroke width.
    The rectangle is posisioned such that the center of its right hand edge
    is positioned at the knockout shape side position
    and the extent of its width is in the direction of the start of the path,
    if this is the left knockout shape side, or the end of the path if this
    is the right knockout shape side.</p>
     <p>If the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-5/#valdef-media-inverted-colors-inverted" id="ref-for-valdef-media-inverted-colors-inverted③">inverted</a> keyword is specified,
    then the knockout shape side comprises two rectangles.  If the specified
    height is greater than or equal to the stroke width, then the height
    of these rectangles is zero; otherwise, their heights are half of the
    difference between the stroke width and the specified height.  The
    top edge of one of the rectangles is half of the stroke width away
    from the marker orientation tangent line, with its bottom edge closer to the tangent line.
    The other rectangle has its bottom edge half of the stroke width
    away from the tangent line and its top edge closer to the tangent line.
    The right edges of the rectangles are aligned with each other and
    also with the line perpendicular to the marker orientation tangent line.
    The extent of the widths of the rectangles is in the direction
    of the start of the path, if this is the left knockout shape side,
    or the end of the path if this is the right knockout shape side.</p>
    <dt>[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①⑤" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①⑤">&lt;percentage></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⑧">&lt;number></a> ]{1,2} inverted? [ rectangle | triangle ]
    <dd>
     <p>The knockout shape side comprises one or two rectangles.  These
    rectangles are aligned such that their top and bottom edges are
    parallel to the tangent to the marker orientation.
    The length or percentage is a width and the second, if specified,
    is a height.  Percentage values here refer to the width and height
    of the marker contents viewport, respectively.</p>
     <p>If the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-5/#valdef-media-inverted-colors-inverted" id="ref-for-valdef-media-inverted-colors-inverted④">inverted</a> keyword is not specified,
    then the knockout shape side is a single rectangle.  The width of the
    rectangle is the specified width value.  The height of the rectangle is the maximum
    of the stroke width of the path on which the marker exists and the specified
    height value, if it is specified.  If it is not specified, then the height of the
    rectangle is just the stroke width.
    The rectangle is positioned such that the center of its right hand edge
    is positioned at the knockout shape side position
    and the extent of its width is in the direction of the start of the path,
    if this is the left knockout shape side, or the end of the path if this
    is the right knockout shape side.</p>
     <p>If the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-5/#valdef-media-inverted-colors-inverted" id="ref-for-valdef-media-inverted-colors-inverted⑤">inverted</a> keyword is specified,
    then the knockout shape side comprises two rectangles.  If the specified
    height is greater than or equal to the stroke width, then the height
    of these rectangles is zero; otherwise, their heights are half of the
    difference between the stroke width and the specified height.  The
    top edge of one of the rectangles is half of the stroke width away
    from the marker orientation tangent line, with its bottom edge closer to the tangent line.
    The other rectangle has its bottom edge half of the stroke width
    away from the tangent line and its top edge closer to the tangent line.
    The right edges of the rectangles are aligned with each other and
    also with the line perpendicular to the marker orientation tangent line.
    The extent of the widths of the rectangles is in the direction
    of the start of the path, if this is the left knockout shape side,
    or the end of the path if this is the right knockout shape side.</p>
    <dt>[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①⑥" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①⑥">&lt;percentage></a> | <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①⑨">&lt;number></a> ]{1,2} inverted? triangle
    <dd>
     <p class="issue" id="issue-2f43b42f"><a class="self-link" href="#issue-2f43b42f"></a>...</p>
   </dl>
   <p class="issue" id="issue-f84fbb3f"><a class="self-link" href="#issue-f84fbb3f"></a> A diagram showing the construction of these shapes
would be helpful.</p>
   <p class="issue" id="issue-fcb1a084"><a class="self-link" href="#issue-fcb1a084"></a> Need to define how the two shape sides are joined together.
It’s taking the top and bottom points from both shapes, drawing vertical
lines to the edge of the stroke shape, then drawing two horizontal lines
to join them together.</p>
   <p>The two knockout shape sides must not intersect, although they may
touch.  If they do intersect, then no knockout is performed for that
marker when painting the stroke.</p>
   <p class="note" role="note"><span>Note:</span> For example, using <span class="css">8px inverted triangle at -4px</span> for <a class="property" data-link-type="propdesc" href="#propdef-marker-knockout-left" id="ref-for-propdef-marker-knockout-left③">marker-knockout-left</a> and <span class="css">8px triangle</span> for <a class="property" data-link-type="propdesc" href="#propdef-marker-knockout-right" id="ref-for-propdef-marker-knockout-right③">marker-knockout-right</a> is allowed, as the two straight lines that form the left shape side do not intersect
with either of the two straight lines that form the right shape side.
However, using <span class="css">8px triangle at -4px</span> for
both properties would obviously cause an intersection, and so would not
be allowed.</p>
   <p></p>
   <div class="figure">
     <img alt="Image showing various marker knockout shapes." class="bordered" src="images/knockout-shapes.svg" style="max-width: none"> 
    <p class="caption">An illustration of the use of inverted and non-inverted circle,
  rectangle and triangle knockout shapes, at both 0px and 10px offsets.
  The value beneath each pink stroke is used for both <a class="property" data-link-type="propdesc" href="#propdef-marker-knockout-left" id="ref-for-propdef-marker-knockout-left④">marker-knockout-left</a> and <a class="property" data-link-type="propdesc" href="#propdef-marker-knockout-right" id="ref-for-propdef-marker-knockout-right④">marker-knockout-right</a>.  (The marker itself here has no
  content and does not render anything.)</p>
   </div>
   <div class="issue" id="issue-cb08f5ff">
    <a class="self-link" href="#issue-cb08f5ff"></a> 
    <p>While this is nice for straight line segments, if the
  path is curved at the marker position then it might be preferable to
  have the knockout shapes aligned with the tangent at the knockout shape
  side position, rather than with the marker orientation.  Especially
  if the knockout is being used as a fancy dash pattern.  Then we would
  likely want to join the left and right sides of the shape with a curved
  shape (along the stroke) and not just a rectangle.  If we allow this,
  then computing that shape is going to be hard, and will mean that
  determining whether the left and right sides of the knockout shape
  intersect, and determining what the intersections of all of the knockout shapes
  on a path are, is also going to be hard.  Perhaps that can be handled by
  extending dashing line caps with these shapes rather than here?  Regardless of
  whether it is handled by marker knockouts or new line caps, it’s going
  to be non-trivial to compute the right shapes.</p>
    <p>Another thing to note is that knockouts here are like setting up
  a clipping path to remove parts of the stroke when it’s painted.  That
  means that if the stroke intersects itself over the knockout areas,
  it’s going to be knocked out of all bits of the stroke that go
  through those areas.  That may or may not be fine depending on
  your use cases.</p>
   </div>
   <h2 class="heading settled" data-level="9" id="MarkerAlgorithm"><span class="secno">9. </span><span class="content">Details on how markers are rendered</span><a class="self-link" href="#MarkerAlgorithm"></a></h2>
   <p>Markers are drawn after the given object is filled and stroked.</p>
   <p>For each marker that is drawn, a temporary new user coordinate
system is established so that the marker will be positioned and sized
correctly, as follows:</p>
   <ul>
    <li>The axes of the temporary new user coordinate system are aligned
  according to the <a data-link-type="element-attr" href="#element-attrdef-marker-orient" id="ref-for-element-attrdef-marker-orient③">orient</a> attribute on the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④⑤">marker</a> element and the slope of the curve at the given vertex.
  (Note: if there is a discontinuity at a vertex, the slope is the
  average of the slopes of the two segments of the curve that join
  at the given vertex. If a slope cannot be determined, the slope is
  assumed to be zero.)
    <li>A temporary new coordinate system is established by attribute <a data-link-type="element-attr" href="#element-attrdef-marker-markerunits" id="ref-for-element-attrdef-marker-markerunits④">markerUnits</a>. If <a data-link-type="element-attr" href="#element-attrdef-marker-markerunits" id="ref-for-element-attrdef-marker-markerunits⑤">markerUnits</a> equals <a class="css" data-link-type="maybe" href="#valdef-markerunits-strokewidth" id="ref-for-valdef-markerunits-strokewidth">strokeWidth</a>, then the temporary new
  user coordinate system is the result of scaling the current
  user coordinate system by the current value of property <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty①">stroke-width</a>. If <a data-link-type="element-attr" href="#element-attrdef-marker-markerunits" id="ref-for-element-attrdef-marker-markerunits⑥">markerUnits</a> equals <a class="css" data-link-type="maybe" href="#valdef-markerunits-userspaceonuse" id="ref-for-valdef-markerunits-userspaceonuse">userSpaceOnUse</a>, then no extra scale transformation is applied.
    <li>An additional set of transformations might occur if the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④⑥">marker</a> element includes a <a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox⑨">viewBox</a> attribute, in
  which case additional transformations are set up to produce the necessary
  result due to attributes <a data-link-type="element-attr" href="#element-attrdef-marker-viewbox" id="ref-for-element-attrdef-marker-viewbox①⓪">viewBox</a> and <a data-link-type="element-attr">preserveAspectRatio</a>.
    <li>If the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow②">overflow</a> property on the <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④⑦">marker</a> element
  indicates that the marker needs to be clipped to its viewport, then an
  implicit clipping path is established at the bounds of the viewport.
   </ul>
   <p>The rendering effect of a marker is as if the contents of the
referenced <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④⑧">marker</a> element were deeply cloned
into a separate non-exposed DOM tree for each instance of the
marker. Because the cloned DOM tree is non-exposed, the SVG DOM
does not show the cloned instance of the marker.</p>
   <p>For user agents that support <a href="styling.html#StylingWithCSS">Styling
with CSS</a>, the conceptual deep cloning of the referenced <a data-link-type="element" href="#elementdef-marker" id="ref-for-elementdef-marker④⑨">marker</a> element into a non-exposed DOM tree also
copies any property values resulting from <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html">the CSS cascade</a> ([<a href="refs.html#ref-CSS21">CSS21</a>], chapter 6) and
property inheritance on the referenced element and its contents. CSS 2.1
selectors can be applied to the original (i.e., referenced) elements
because they are part of the formal document structure. CSS 2.1 selectors
cannot be applied to the (conceptually) cloned DOM tree because its
contents are not part of the formal document structure.</p>
   <div class="example" id="example-df91dd43">
    <a class="self-link" href="#example-df91dd43"></a> 
    <p>For illustrative purposes, we’ll repeat the marker example shown earlier:</p>
<pre><code class="html">&lt;?xml version="1.0" standalone="no"?>
&lt;svg width="4in" height="2in"
     viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  &lt;defs>
    &lt;marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5"
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      &lt;path d="M 0 0 L 10 5 L 0 10 z" />
    &lt;/marker>
  &lt;/defs>
  &lt;rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  &lt;desc>Placing an arrowhead at the end of a path.
  &lt;/desc>
  &lt;path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100"
        marker-end="url(#Triangle)"  />
&lt;/svg>
</code></pre>
   </div>
   <div class="example" id="example-cf4c8f84">
    <a class="self-link" href="#example-cf4c8f84"></a> 
    <p>The rendering effect of the above file will be visually identical to
  the following:</p>
<pre><code class="html">&lt;?xml version="1.0" standalone="no"?>
&lt;svg width="4in" height="2in"
     viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  &lt;desc>File which produces the same effect
      as the marker example file, but without
      using markers.
  &lt;/desc>
  &lt;rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  &lt;!-- The path draws as before, but without the marker properties -->
  &lt;path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100"  />
  &lt;!-- The following logic simulates drawing a marker
       at final vertex of the path. -->
  &lt;!-- First off, move the origin of the user coordinate system
       so that the origin is now aligned with the end point of the path. -->
  <strong>&lt;g transform="translate(2500,1250)" ></strong>
    &lt;!-- Rotate the coordinate system 45 degrees because
         the marker specified orient="auto" and the final segment
         of the path is going in the direction of 45 degrees. -->
    <strong>&lt;g transform="rotate(45)" ></strong>
      &lt;!-- Scale the coordinate system to match the coordinate system
           indicated by the 'markerUnits' attributes, which in this case has
           a value of 'strokeWidth'. Therefore, scale the coordinate system
           by the current value of the 'stroke-width' property, which is 100. -->
      <strong>&lt;g transform="scale(100)" ></strong>
        &lt;!-- Translate the coordinate system by
             (-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY)
             in order that (refX,refY) within the marker will align with the vertex.
             In this case, we use the default value for preserveAspectRatio
             ('xMidYMid meet'), which means find a uniform scale factor
             (i.e., viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY)
             such that the viewBox fits entirely within the viewport ('meet') and
             is center-aligned ('xMidYMid'). In this case, the uniform scale factor
             is markerHeight/viewBoxHeight=3/10=.3. Therefore, translate by
             (-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5). -->
        <strong>&lt;g transform="translate(0,-1.5)" ></strong>
          &lt;!-- There is an implicit clipping path because the user agent style
               sheet says that the 'overflow' property for markers has the value
               'hidden'. To achieve this, create a clipping path at the bounds
               of the viewport. Note that in this case the viewport extends
               0.5 units to the left and right of the viewBox due to
               a uniform scale factor, different ratios for markerWidth/viewBoxWidth
               and markerHeight/viewBoxHeight, and 'xMidYMid' alignment -->
          <strong>&lt;clipPath id="cp1" >
            &lt;rect x="-0.5" y="0" width="4" height="3" />
          &lt;/clipPath></strong>
          <strong>&lt;g clip-path="url(#cp1)" ></strong>
            &lt;!-- Scale the coordinate system by the uniform scale factor
                 markerHeight/viewBoxHeight=3/10=.3 to set the coordinate
                 system to viewBox units. -->
            <strong>&lt;g transform="scale(.3)" ></strong>
              &lt;!-- This 'g' element carries all property values that result from
                   cascading and inheritance of properties on the original 'marker' element.
                   In this example, neither fill nor stroke was specified on the 'marker'
                   element or any ancestors of the 'marker', so the initial values of
                   "black" and "none" are used, respectively. -->
             <strong>&lt;g fill="black" stroke="none" ></strong>
                &lt;!-- Expand out the contents of the 'marker' element. -->
                <strong>&lt;path d="M 0 0 L 10 5 L 0 10 z" /></strong>
              <strong>&lt;/g></strong>
            <strong>&lt;/g></strong>
          <strong>&lt;/g></strong>
        <strong>&lt;/g></strong>
      <strong>&lt;/g></strong>
    <strong>&lt;/g></strong>
  <strong>&lt;/g></strong>
&lt;/svg>
</code></pre>
    <p class="view-as-svg"><a href="images/marker-simulated.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
   </div>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example.</p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note.</p>
  <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
  <p>Conformance to this specification
    is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
            style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
            documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module. </p>
  <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module. </p>
  <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3>
  <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
    as appropriate</a>) any at-rules, properties, property values, keywords,
    and other syntactic constructs for which they have no usable level of
    support. In particular, user agents <strong>must not</strong> selectively
    ignore unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid
    (as unsupported values must be), CSS requires that the entire declaration
    be ignored.</p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
        the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
  <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they
    can demonstrate to be correctly implemented according to spec. </p>
  <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental
    CSS renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before
    releasing an unprefixed implementation of any CSS features. Testcases
    submitted to W3C are subject to review and correction by the CSS
    Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#typedef-child-selector">&lt;child-selector></a><span>, in §3</span>
   <li><a href="#element-attrdef-marker-href">href</a><span>, in §2</span>
   <li><a href="#typedef-knockout-offset">&lt;knockout-offset></a><span>, in §8</span>
   <li><a href="#typedef-knockout-shape">&lt;knockout-shape></a><span>, in §8</span>
   <li><a href="#markable-elements">markable elements</a><span>, in §1</span>
   <li>
    marker
    <ul>
     <li><a href="#elementdef-marker">(element)</a><span>, in §2</span>
     <li><a href="#propdef-marker">(property)</a><span>, in §7</span>
    </ul>
   <li><a href="#propdef-marker-end">marker-end</a><span>, in §4</span>
   <li><a href="#typedef-marker-gap">&lt;marker-gap></a><span>, in §6</span>
   <li><a href="#element-attrdef-marker-markerheight">markerHeight</a><span>, in §2</span>
   <li><a href="#propdef-marker-knockout-left">marker-knockout-left</a><span>, in §8</span>
   <li><a href="#propdef-marker-knockout-right">marker-knockout-right</a><span>, in §8</span>
   <li><a href="#propdef-marker-mid">marker-mid</a><span>, in §4</span>
   <li><a href="#propdef-marker-pattern">marker-pattern</a><span>, in §6</span>
   <li><a href="#marker-properties">marker properties</a><span>, in §1</span>
   <li>
    &lt;marker-ref>
    <ul>
     <li><a href="#DataTypeMarkerRef">(type)</a><span>, in §3</span>
     <li><a href="#valdef-marker-segment-marker-ref">value for marker-segment</a><span>, in §5</span>
     <li><a href="#valdef-marker-start-marker-ref">value for marker-start</a><span>, in §4</span>
    </ul>
   <li><a href="#typedef-marker-ref-group">&lt;marker-ref-group></a><span>, in §6</span>
   <li><a href="#propdef-marker-segment">marker-segment</a><span>, in §5</span>
   <li><a href="#propdef-marker-start">marker-start</a><span>, in §4</span>
   <li><a href="#element-attrdef-marker-markerunits">markerUnits</a><span>, in §2</span>
   <li><a href="#element-attrdef-marker-markerwidth">markerWidth</a><span>, in §2</span>
   <li>
    none
    <ul>
     <li><a href="#valdef-marker-pattern-none">value for marker-pattern</a><span>, in §6</span>
     <li><a href="#valdef-marker-segment-none">value for marker-segment</a><span>, in §5</span>
     <li><a href="#valdef-marker-start-none">value for marker-start</a><span>, in §4</span>
    </ul>
   <li><a href="#element-attrdef-marker-orient">orient</a><span>, in §2</span>
   <li><a href="#element-attrdef-marker-position">position</a><span>, in §2</span>
   <li><a href="#positioned-markers">positioned markers</a><span>, in §1</span>
   <li><a href="#element-attrdef-marker-preserveaspectratio">preserveAspectRatio</a><span>, in §2</span>
   <li><a href="#element-attrdef-marker-refx">refX</a><span>, in §2</span>
   <li><a href="#element-attrdef-marker-refy">refY</a><span>, in §2</span>
   <li><a href="#repeating-markers">repeating markers</a><span>, in §1</span>
   <li><a href="#segment-markers">segment markers</a><span>, in §1</span>
   <li><a href="#valdef-markerunits-strokewidth">strokeWidth</a><span>, in §2</span>
   <li><a href="#valdef-markerunits-userspaceonuse">userSpaceOnUse</a><span>, in §2</span>
   <li><a href="#vertex-markers">vertex markers</a><span>, in §1</span>
   <li><a href="#element-attrdef-marker-viewbox">viewBox</a><span>, in §2</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-background-position">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css-display-3/#propdef-display">https://drafts.csswg.org/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">2. The marker element</a> <a href="#ref-for-propdef-display①">(2)</a> <a href="#ref-for-propdef-display②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-none">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-none">https://drafts.csswg.org/css-display-3/#valdef-display-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-none">2. The marker element</a> <a href="#ref-for-valdef-display-none①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-clippath">
   <a href="https://drafts.fxtf.org/css-masking-1/#elementdef-clippath">https://drafts.fxtf.org/css-masking-1/#elementdef-clippath</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-clippath">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-mask">
   <a href="https://drafts.fxtf.org/css-masking-1/#elementdef-mask">https://drafts.fxtf.org/css-masking-1/#elementdef-mask</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-mask">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-overflow-hidden">
   <a href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden">https://drafts.csswg.org/css-overflow-3/#valdef-overflow-hidden</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-overflow-hidden">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-overflow">
   <a href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">https://drafts.csswg.org/css-overflow-3/#propdef-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overflow">2. The marker element</a> <a href="#ref-for-propdef-overflow①">(2)</a>
    <li><a href="#ref-for-propdef-overflow②">9. Details on how markers are rendered</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-angle-value">
   <a href="https://drafts.csswg.org/css-values-3/#angle-value">https://drafts.csswg.org/css-values-3/#angle-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-angle-value">2. The marker element</a> <a href="#ref-for-angle-value①">(2)</a> <a href="#ref-for-angle-value②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-length-value">
   <a href="https://drafts.csswg.org/css-values-3/#length-value">https://drafts.csswg.org/css-values-3/#length-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">2. The marker element</a> <a href="#ref-for-length-value①">(2)</a> <a href="#ref-for-length-value②">(3)</a> <a href="#ref-for-length-value③">(4)</a>
    <li><a href="#ref-for-length-value④">6. Repeating markers: the marker-pattern property</a> <a href="#ref-for-length-value⑤">(2)</a>
    <li><a href="#ref-for-length-value⑥">7. Marker shorthand: the marker property</a> <a href="#ref-for-length-value⑦">(2)</a>
    <li><a href="#ref-for-length-value⑧">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-length-value⑨">(2)</a> <a href="#ref-for-length-value①⓪">(3)</a> <a href="#ref-for-length-value①①">(4)</a> <a href="#ref-for-length-value①②">(5)</a> <a href="#ref-for-length-value①③">(6)</a> <a href="#ref-for-length-value①④">(7)</a> <a href="#ref-for-length-value①⑤">(8)</a> <a href="#ref-for-length-value①⑥">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-number-value">
   <a href="https://drafts.csswg.org/css-values-3/#number-value">https://drafts.csswg.org/css-values-3/#number-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-number-value">2. The marker element</a> <a href="#ref-for-number-value①">(2)</a> <a href="#ref-for-number-value②">(3)</a> <a href="#ref-for-number-value③">(4)</a> <a href="#ref-for-number-value④">(5)</a> <a href="#ref-for-number-value⑤">(6)</a> <a href="#ref-for-number-value⑥">(7)</a>
    <li><a href="#ref-for-number-value⑦">6. Repeating markers: the marker-pattern property</a> <a href="#ref-for-number-value⑧">(2)</a>
    <li><a href="#ref-for-number-value⑨">7. Marker shorthand: the marker property</a> <a href="#ref-for-number-value①⓪">(2)</a>
    <li><a href="#ref-for-number-value①①">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-number-value①②">(2)</a> <a href="#ref-for-number-value①③">(3)</a> <a href="#ref-for-number-value①④">(4)</a> <a href="#ref-for-number-value①⑤">(5)</a> <a href="#ref-for-number-value①⑥">(6)</a> <a href="#ref-for-number-value①⑦">(7)</a> <a href="#ref-for-number-value①⑧">(8)</a> <a href="#ref-for-number-value①⑨">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-percentage-value">
   <a href="https://drafts.csswg.org/css-values-3/#percentage-value">https://drafts.csswg.org/css-values-3/#percentage-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentage-value">2. The marker element</a> <a href="#ref-for-percentage-value①">(2)</a> <a href="#ref-for-percentage-value②">(3)</a> <a href="#ref-for-percentage-value③">(4)</a>
    <li><a href="#ref-for-percentage-value④">6. Repeating markers: the marker-pattern property</a> <a href="#ref-for-percentage-value⑤">(2)</a>
    <li><a href="#ref-for-percentage-value⑥">7. Marker shorthand: the marker property</a> <a href="#ref-for-percentage-value⑦">(2)</a>
    <li><a href="#ref-for-percentage-value⑧">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-percentage-value⑨">(2)</a> <a href="#ref-for-percentage-value①⓪">(3)</a> <a href="#ref-for-percentage-value①①">(4)</a> <a href="#ref-for-percentage-value①②">(5)</a> <a href="#ref-for-percentage-value①③">(6)</a> <a href="#ref-for-percentage-value①④">(7)</a> <a href="#ref-for-percentage-value①⑤">(8)</a> <a href="#ref-for-percentage-value①⑥">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-url-value">
   <a href="https://drafts.csswg.org/css-values-3/#url-value">https://drafts.csswg.org/css-values-3/#url-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-url-value">3. Referencing marker elements</a> <a href="#ref-for-url-value①">(2)</a> <a href="#ref-for-url-value②">(3)</a>
    <li><a href="#ref-for-url-value③">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a>
    <li><a href="#ref-for-url-value④">5. Segment markers: the marker-segment property</a>
    <li><a href="#ref-for-url-value⑤">6. Repeating markers: the marker-pattern property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-zero-plus">
   <a href="https://drafts.csswg.org/css-values-4/#mult-zero-plus">https://drafts.csswg.org/css-values-4/#mult-zero-plus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-zero-plus">6. Repeating markers: the marker-pattern property</a>
    <li><a href="#ref-for-mult-zero-plus①">7. Marker shorthand: the marker property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-one-plus">
   <a href="https://drafts.csswg.org/css-values-4/#mult-one-plus">https://drafts.csswg.org/css-values-4/#mult-one-plus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-one-plus">6. Repeating markers: the marker-pattern property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">6. Repeating markers: the marker-pattern property</a> <a href="#ref-for-mult-opt①">(2)</a>
    <li><a href="#ref-for-mult-opt②">7. Marker shorthand: the marker property</a>
    <li><a href="#ref-for-mult-opt③">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-mult-opt④">(2)</a> <a href="#ref-for-mult-opt⑤">(3)</a> <a href="#ref-for-mult-opt⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-num-range">
   <a href="https://drafts.csswg.org/css-values-4/#mult-num-range">https://drafts.csswg.org/css-values-4/#mult-num-range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-num-range">7. Marker shorthand: the marker property</a> <a href="#ref-for-mult-num-range①">(2)</a>
    <li><a href="#ref-for-mult-num-range②">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-num">
   <a href="https://drafts.csswg.org/css-values-4/#mult-num">https://drafts.csswg.org/css-values-4/#mult-num</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-num">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a>
    <li><a href="#ref-for-comb-one①">5. Segment markers: the marker-segment property</a>
    <li><a href="#ref-for-comb-one②">6. Repeating markers: the marker-pattern property</a> <a href="#ref-for-comb-one③">(2)</a> <a href="#ref-for-comb-one④">(3)</a>
    <li><a href="#ref-for-comb-one⑤">7. Marker shorthand: the marker property</a> <a href="#ref-for-comb-one⑥">(2)</a> <a href="#ref-for-comb-one⑦">(3)</a> <a href="#ref-for-comb-one⑧">(4)</a> <a href="#ref-for-comb-one⑨">(5)</a> <a href="#ref-for-comb-one①⓪">(6)</a> <a href="#ref-for-comb-one①①">(7)</a>
    <li><a href="#ref-for-comb-one①②">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-comb-one①③">(2)</a> <a href="#ref-for-comb-one①④">(3)</a> <a href="#ref-for-comb-one①⑤">(4)</a> <a href="#ref-for-comb-one①⑥">(5)</a> <a href="#ref-for-comb-one①⑦">(6)</a> <a href="#ref-for-comb-one①⑧">(7)</a> <a href="#ref-for-comb-one①⑨">(8)</a> <a href="#ref-for-comb-one②⓪">(9)</a> <a href="#ref-for-comb-one②①">(10)</a> <a href="#ref-for-comb-one②②">(11)</a> <a href="#ref-for-comb-one②③">(12)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-ending-shape-ellipse">
   <a href="https://drafts.csswg.org/css-images-3/#valdef-ending-shape-ellipse">https://drafts.csswg.org/css-images-3/#valdef-ending-shape-ellipse</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-ending-shape-ellipse">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-svg-paint-child">
   <a href="https://drafts.fxtf.org/fill-stroke-3/#valdef-svg-paint-child">https://drafts.fxtf.org/fill-stroke-3/#valdef-svg-paint-child</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-svg-paint-child">3. Referencing marker elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-filter">
   <a href="https://drafts.fxtf.org/filter-effects-1/#elementdef-filter">https://drafts.fxtf.org/filter-effects-1/#elementdef-filter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-filter">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-media-inverted-colors-inverted">
   <a href="https://drafts.csswg.org/mediaqueries-5/#valdef-media-inverted-colors-inverted">https://drafts.csswg.org/mediaqueries-5/#valdef-media-inverted-colors-inverted</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-media-inverted-colors-inverted">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-valdef-media-inverted-colors-inverted①">(2)</a> <a href="#ref-for-valdef-media-inverted-colors-inverted②">(3)</a> <a href="#ref-for-valdef-media-inverted-colors-inverted③">(4)</a> <a href="#ref-for-valdef-media-inverted-colors-inverted④">(5)</a> <a href="#ref-for-valdef-media-inverted-colors-inverted⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-CursorElement">
   <a href="https://www.w3.org/TR/SVG11/interact.html#CursorElement">https://www.w3.org/TR/SVG11/interact.html#CursorElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-CursorElement">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-InterfaceSVGMarkerElement">
   <a href="https://svgwg.org/svg2-draft/painting.html#InterfaceSVGMarkerElement">https://svgwg.org/svg2-draft/painting.html#InterfaceSVGMarkerElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-InterfaceSVGMarkerElement">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-a">
   <a href="https://svgwg.org/svg2-draft/linking.html#elementdef-a">https://svgwg.org/svg2-draft/linking.html#elementdef-a</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-a">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-container-element">
   <a href="https://svgwg.org/svg2-draft/struct.html#container-element">https://svgwg.org/svg2-draft/struct.html#container-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-container-element">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermDescriptiveElement">
   <a href="https://svgwg.org/svg2-draft/struct.html#TermDescriptiveElement">https://svgwg.org/svg2-draft/struct.html#TermDescriptiveElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermDescriptiveElement">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-FillProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#FillProperty">https://svgwg.org/svg2-draft/painting.html#FillProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-FillProperty">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-foreignObject">
   <a href="https://svgwg.org/svg2-draft/embedded.html#elementdef-foreignObject">https://svgwg.org/svg2-draft/embedded.html#elementdef-foreignObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-foreignObject">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-image">
   <a href="https://svgwg.org/svg2-draft/embedded.html#elementdef-image">https://svgwg.org/svg2-draft/embedded.html#elementdef-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-image">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-line">
   <a href="https://svgwg.org/svg2-draft/shapes.html#elementdef-line">https://svgwg.org/svg2-draft/shapes.html#elementdef-line</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-line①">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermPaintServerElement">
   <a href="https://svgwg.org/svg2-draft/painting.html#TermPaintServerElement">https://svgwg.org/svg2-draft/painting.html#TermPaintServerElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermPaintServerElement">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-path">
   <a href="https://svgwg.org/svg2-draft/paths.html#elementdef-path">https://svgwg.org/svg2-draft/paths.html#elementdef-path</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-path①">1. Introduction</a>
    <li><a href="#ref-for-elementdef-path②">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a> <a href="#ref-for-elementdef-path③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-polygon">
   <a href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polygon">https://svgwg.org/svg2-draft/shapes.html#elementdef-polygon</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-polygon①">1. Introduction</a>
    <li><a href="#ref-for-elementdef-polygon②">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-polyline">
   <a href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polyline">https://svgwg.org/svg2-draft/shapes.html#elementdef-polyline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-polyline①">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermPresentationAttribute">
   <a href="https://svgwg.org/svg2-draft/styling.html#TermPresentationAttribute">https://svgwg.org/svg2-draft/styling.html#TermPresentationAttribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermPresentationAttribute">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-script">
   <a href="https://svgwg.org/svg2-draft/interact.html#elementdef-script">https://svgwg.org/svg2-draft/interact.html#elementdef-script</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-script">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermShapeElement">
   <a href="https://svgwg.org/svg2-draft/shapes.html#TermShapeElement">https://svgwg.org/svg2-draft/shapes.html#TermShapeElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermShapeElement">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StrokeProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#StrokeProperty">https://svgwg.org/svg2-draft/painting.html#StrokeProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StrokeProperty">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StrokeWidthProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty">https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StrokeWidthProperty">2. The marker element</a>
    <li><a href="#ref-for-StrokeWidthProperty①">9. Details on how markers are rendered</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermStructuralElement">
   <a href="https://svgwg.org/svg2-draft/struct.html#TermStructuralElement">https://svgwg.org/svg2-draft/struct.html#TermStructuralElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermStructuralElement">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-style">
   <a href="https://svgwg.org/svg2-draft/styling.html#elementdef-style">https://svgwg.org/svg2-draft/styling.html#elementdef-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-style">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-switch">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-switch">https://svgwg.org/svg2-draft/struct.html#elementdef-switch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-switch">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-symbol">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-symbol">https://svgwg.org/svg2-draft/struct.html#elementdef-symbol</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-symbol">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-text">
   <a href="https://svgwg.org/svg2-draft/text.html#elementdef-text">https://svgwg.org/svg2-draft/text.html#elementdef-text</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-text">2. The marker element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-use">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-use">https://svgwg.org/svg2-draft/struct.html#elementdef-use</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-use">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-view">
   <a href="https://svgwg.org/svg2-draft/linking.html#elementdef-view">https://svgwg.org/svg2-draft/linking.html#elementdef-view</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-view">2. The marker element</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-background-position" style="color:initial">background-position</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-none" style="color:initial">none</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-masking-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-elementdef-clippath" style="color:initial">clippath</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-mask" style="color:initial">mask</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-overflow-hidden" style="color:initial">hidden</span>
     <li><span class="dfn-paneled" id="term-for-propdef-overflow" style="color:initial">overflow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-angle-value" style="color:initial">&lt;angle></span>
     <li><span class="dfn-paneled" id="term-for-length-value" style="color:initial">&lt;length></span>
     <li><span class="dfn-paneled" id="term-for-number-value" style="color:initial">&lt;number></span>
     <li><span class="dfn-paneled" id="term-for-percentage-value" style="color:initial">&lt;percentage></span>
     <li><span class="dfn-paneled" id="term-for-url-value" style="color:initial">&lt;url></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-zero-plus" style="color:initial">*</span>
     <li><span class="dfn-paneled" id="term-for-mult-one-plus" style="color:initial">+</span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-mult-num-range" style="color:initial">{a,b}</span>
     <li><span class="dfn-paneled" id="term-for-mult-num" style="color:initial">{a}</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css3-images]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-ending-shape-ellipse" style="color:initial">ellipse</span>
    </ul>
   <li>
    <a data-link-type="biblio">[fill-stroke-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-svg-paint-child" style="color:initial">child</span>
    </ul>
   <li>
    <a data-link-type="biblio">[filter-effects-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-elementdef-filter" style="color:initial">filter</span>
    </ul>
   <li>
    <a data-link-type="biblio">[mediaqueries-5]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-media-inverted-colors-inverted" style="color:initial">inverted</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG11]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-CursorElement" style="color:initial">cursor</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-InterfaceSVGMarkerElement" style="color:initial">SVGMarkerElement</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-a" style="color:initial">a</span>
     <li><span class="dfn-paneled" id="term-for-container-element" style="color:initial">container element</span>
     <li><span class="dfn-paneled" id="term-for-TermDescriptiveElement" style="color:initial">descriptive element</span>
     <li><span class="dfn-paneled" id="term-for-FillProperty" style="color:initial">fill</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-foreignObject" style="color:initial">foreignobject</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-image" style="color:initial">image</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-line" style="color:initial">line</span>
     <li><span class="dfn-paneled" id="term-for-TermPaintServerElement" style="color:initial">paint server element</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-path" style="color:initial">path</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-polygon" style="color:initial">polygon</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-polyline" style="color:initial">polyline</span>
     <li><span class="dfn-paneled" id="term-for-TermPresentationAttribute" style="color:initial">presentation attributes</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-script" style="color:initial">script</span>
     <li><span class="dfn-paneled" id="term-for-TermShapeElement" style="color:initial">shape elements</span>
     <li><span class="dfn-paneled" id="term-for-StrokeProperty" style="color:initial">stroke</span>
     <li><span class="dfn-paneled" id="term-for-StrokeWidthProperty" style="color:initial">stroke-width</span>
     <li><span class="dfn-paneled" id="term-for-TermStructuralElement" style="color:initial">structural element</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-style" style="color:initial">style</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-switch" style="color:initial">switch</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-symbol" style="color:initial">symbol</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-text" style="color:initial">text</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-use" style="color:initial">use</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-view" style="color:initial">view</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-masking-1">[CSS-MASKING-1]
   <dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-masking-1/">CSS Masking Module Level 1</a>. 26 August 2014. CR. URL: <a href="https://www.w3.org/TR/css-masking-1/">https://www.w3.org/TR/css-masking-1/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css3-images">[CSS3-IMAGES]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css3-images/">CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. CR. URL: <a href="https://www.w3.org/TR/css3-images/">https://www.w3.org/TR/css3-images/</a>
   <dt id="biblio-fill-stroke-3">[FILL-STROKE-3]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/fill-stroke-3/">CSS Fill and Stroke Module Level 3</a>. 13 April 2017. WD. URL: <a href="https://www.w3.org/TR/fill-stroke-3/">https://www.w3.org/TR/fill-stroke-3/</a>
   <dt id="biblio-filter-effects-1">[FILTER-EFFECTS-1]
   <dd>Dirk Schulze; Dean Jackson. <a href="https://www.w3.org/TR/filter-effects-1/">Filter Effects Module Level 1</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/filter-effects-1/">https://www.w3.org/TR/filter-effects-1/</a>
   <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5]
   <dd>Media Queries Level 5 URL: <a href="https://drafts.csswg.org/mediaqueries-5/">https://drafts.csswg.org/mediaqueries-5/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-svg11">[SVG11]
   <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-url">[URL]
   <dd>Anne van Kesteren. <a href="https://url.spec.whatwg.org/">URL Standard</a>. Living Standard. URL: <a href="https://url.spec.whatwg.org/">https://url.spec.whatwg.org/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Ani­mat­able
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
      <th scope="col">Media
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-marker" id="ref-for-propdef-marker③">marker</a>
      <td>[ none | &lt;marker-ref> ]{1,4} [ / marker-pattern ]?  | &lt;marker-ref>{0,4} [ &lt;length> | &lt;percentage> | &lt;number> ] [ &lt;length> | &lt;percentage> | &lt;number> | &lt;marker-ref> ]*
      <td>none
      <td>markable elements
      <td>no
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-marker-end" id="ref-for-propdef-marker-end①⑤">marker-end</a>
      <td>none | &lt;marker-ref>
      <td>none
      <td>markable elements
      <td>yes
      <td>n/a
      <td>yes
      <td>per grammar
      <td>as specified, but with &lt;url> values (that are part of a &lt;marker-ref>) made absolute
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-marker-knockout-left" id="ref-for-propdef-marker-knockout-left⑤">marker-knockout-left</a>
      <td>&lt;knockout-offset> | &lt;knockout-shape> [ at &lt;knockout-offset> ]?
      <td>0
      <td>marker
      <td>no
      <td>see prose
      <td>yes
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-marker-knockout-right" id="ref-for-propdef-marker-knockout-right⑤">marker-knockout-right</a>
      <td>&lt;knockout-offset> | &lt;knockout-shape> [ at &lt;knockout-offset> ]?
      <td>0
      <td>marker
      <td>no
      <td>see prose
      <td>yes
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-marker-mid" id="ref-for-propdef-marker-mid①③">marker-mid</a>
      <td>none | &lt;marker-ref>
      <td>none
      <td>markable elements
      <td>yes
      <td>n/a
      <td>yes
      <td>per grammar
      <td>as specified, but with &lt;url> values (that are part of a &lt;marker-ref>) made absolute
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-marker-pattern" id="ref-for-propdef-marker-pattern①⑥">marker-pattern</a>
      <td>&lt;marker-gap>? &lt;marker-ref-group> [ &lt;marker-gap> &lt;marker-gap> ]* &lt;marker-gap>?
      <td>none
      <td>markable elements
      <td>yes
      <td>n/a
      <td>yes
      <td>per grammar
      <td>as specified, but with &lt;url> values (that are part of a &lt;marker-ref>) made absolute
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-marker-segment" id="ref-for-propdef-marker-segment①②">marker-segment</a>
      <td>none | &lt;marker-ref>
      <td>none
      <td>markable elements
      <td>yes
      <td>n/a
      <td>yes
      <td>per grammar
      <td>as specified, but with &lt;url> values (that are part of a &lt;marker-ref>) made absolute
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-marker-start" id="ref-for-propdef-marker-start①⑥">marker-start</a>
      <td>none | &lt;marker-ref>
      <td>none
      <td>markable elements
      <td>yes
      <td>n/a
      <td>yes
      <td>per grammar
      <td>as specified, but with &lt;url> values (that are part of a &lt;marker-ref>) made absolute
      <td>visual
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> There are probably better terms to use than "vertex" and
"segment" markers.  At least, "vertex" would go more naturally with "edge",
but we should use more natural sounding names.<a href="#issue-d6146a12"> ↵ </a></div>
   <div class="issue">This needs to reference a definition for how
      directionality of a given start/mid/end vertex is calculated.
      Part of that (which should be moved somewhere more appropriate) is in
      the <a href="implnote.html#PathElementImplementationNotes">path element implementation notes</a>.
      Some wording from SVG 1.1 appears to have been lost, compare with <a href="http://www.w3.org/TR/SVG11/painting.html#OrientAttribute">this</a>. <br><br> Here’s an example that is a bit unclear currently: <code style="white-space:pre"> &lt;svg>
  &lt;marker id="m" orient="auto" overflow="visible">
    &lt;rect x="-1" y="-0.5" width="1" height="1" fill="green"/>
  &lt;/marker>
  &lt;path d="M50,0C50,50 50,100 50,100" marker-end="url(#m)" stroke-width="100" stroke="red"/>
&lt;/svg> </code> <br> The second control point and the endpoint coincide, should this mean that the direction of the endpoint is a) <em>unknown [aka default to 0 degrees]</em> or
    b) <em>that you have to look at the previous segment(s)/command(s) until a direction can be established</em>? <a href="#issue-2a8a8ee0"> ↵ </a></div>
   <div class="issue">Should a negative or greater than path length value be
  an "in error" / "unsupported" value?<a href="#issue-79ea2baa"> ↵ </a></div>
   <div class="issue">We should say something about referencing <a data-link-type="element" href="#elementdef-marker">marker</a> elements that have an <a data-link-type="element-attr" href="#element-attrdef-marker-href">href</a> with the <a data-link-type="dfn" href="#marker-properties">marker properties</a>.
  I suspect we should just allow this.  Whether we want to allow the full
  element-referencing thing that you can do with gradients, with selective
  overriding of attributes, I’m not sure.<a href="#issue-e5f3570c"> ↵ </a></div>
   <div class="issue"> Make interaction work on <a data-link-type="dfn" href="#positioned-markers">positioned markers</a>.<a href="#issue-cbf39201"> ↵ </a></div>
   <div class="issue"> The marker knockout properties are still under heavy development
and are subject to change. Feedback on how authors might prefer to specify marker
knockout shapes is welcome.<a href="#issue-37a27154"> ↵ </a></div>
   <div class="issue">...<a href="#issue-2f43b42f"> ↵ </a></div>
   <div class="issue"> A diagram showing the construction of these shapes
would be helpful.<a href="#issue-f84fbb3f"> ↵ </a></div>
   <div class="issue"> Need to define how the two shape sides are joined together.
It’s taking the top and bottom points from both shapes, drawing vertical
lines to the edge of the stroke shape, then drawing two horizontal lines
to join them together.<a href="#issue-fcb1a084"> ↵ </a></div>
   <div class="issue">
    <p>While this is nice for straight line segments, if the
  path is curved at the marker position then it might be preferable to
  have the knockout shapes aligned with the tangent at the knockout shape
  side position, rather than with the marker orientation.  Especially
  if the knockout is being used as a fancy dash pattern.  Then we would
  likely want to join the left and right sides of the shape with a curved
  shape (along the stroke) and not just a rectangle.  If we allow this,
  then computing that shape is going to be hard, and will mean that
  determining whether the left and right sides of the knockout shape
  intersect, and determining what the intersections of all of the knockout shapes
  on a path are, is also going to be hard.  Perhaps that can be handled by
  extending dashing line caps with these shapes rather than here?  Regardless of
  whether it is handled by marker knockouts or new line caps, it’s going
  to be non-trivial to compute the right shapes.</p>
    <p>Another thing to note is that knockouts here are like setting up
  a clipping path to remove parts of the stroke when it’s painted.  That
  means that if the stroke intersects itself over the knockout areas,
  it’s going to be knocked out of all bits of the stroke that go
  through those areas.  That may or may not be fine depending on
  your use cases.</p>
     <a href="#issue-cb08f5ff"> ↵ </a>
   </div>
  </div>
  <aside class="dfn-panel" data-for="markable-elements">
   <b><a href="#markable-elements">#markable-elements</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-markable-elements">2. The marker element</a> <a href="#ref-for-markable-elements①">(2)</a> <a href="#ref-for-markable-elements②">(3)</a> <a href="#ref-for-markable-elements③">(4)</a> <a href="#ref-for-markable-elements④">(5)</a> <a href="#ref-for-markable-elements⑤">(6)</a> <a href="#ref-for-markable-elements⑥">(7)</a> <a href="#ref-for-markable-elements⑦">(8)</a>
    <li><a href="#ref-for-markable-elements⑧">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a> <a href="#ref-for-markable-elements⑨">(2)</a>
    <li><a href="#ref-for-markable-elements①⓪">5. Segment markers: the marker-segment property</a>
    <li><a href="#ref-for-markable-elements①①">6. Repeating markers: the marker-pattern property</a> <a href="#ref-for-markable-elements①②">(2)</a>
    <li><a href="#ref-for-markable-elements①③">7. Marker shorthand: the marker property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vertex-markers">
   <b><a href="#vertex-markers">#vertex-markers</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vertex-markers">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a>
    <li><a href="#ref-for-vertex-markers①">5. Segment markers: the marker-segment property</a>
    <li><a href="#ref-for-vertex-markers②">6. Repeating markers: the marker-pattern property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="segment-markers">
   <b><a href="#segment-markers">#segment-markers</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-segment-markers">2. The marker element</a> <a href="#ref-for-segment-markers①">(2)</a>
    <li><a href="#ref-for-segment-markers②">5. Segment markers: the marker-segment property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="repeating-markers">
   <b><a href="#repeating-markers">#repeating-markers</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-repeating-markers">1. Introduction</a>
    <li><a href="#ref-for-repeating-markers①">2. The marker element</a>
    <li><a href="#ref-for-repeating-markers②">6. Repeating markers: the marker-pattern property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="positioned-markers">
   <b><a href="#positioned-markers">#positioned-markers</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-positioned-markers">1. Introduction</a>
    <li><a href="#ref-for-positioned-markers①">2. The marker element</a> <a href="#ref-for-positioned-markers②">(2)</a> <a href="#ref-for-positioned-markers③">(3)</a> <a href="#ref-for-positioned-markers④">(4)</a> <a href="#ref-for-positioned-markers⑤">(5)</a> <a href="#ref-for-positioned-markers⑥">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="marker-properties">
   <b><a href="#marker-properties">#marker-properties</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-marker-properties">2. The marker element</a> <a href="#ref-for-marker-properties①">(2)</a> <a href="#ref-for-marker-properties②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="elementdef-marker">
   <b><a href="#elementdef-marker">#elementdef-marker</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-marker">1. Introduction</a> <a href="#ref-for-elementdef-marker①">(2)</a> <a href="#ref-for-elementdef-marker②">(3)</a> <a href="#ref-for-elementdef-marker③">(4)</a>
    <li><a href="#ref-for-elementdef-marker④">2. The marker element</a> <a href="#ref-for-elementdef-marker⑤">(2)</a> <a href="#ref-for-elementdef-marker⑥">(3)</a> <a href="#ref-for-elementdef-marker⑦">(4)</a> <a href="#ref-for-elementdef-marker⑧">(5)</a> <a href="#ref-for-elementdef-marker⑨">(6)</a> <a href="#ref-for-elementdef-marker①⓪">(7)</a> <a href="#ref-for-elementdef-marker①①">(8)</a> <a href="#ref-for-elementdef-marker①②">(9)</a> <a href="#ref-for-elementdef-marker①③">(10)</a> <a href="#ref-for-elementdef-marker①④">(11)</a> <a href="#ref-for-elementdef-marker①⑤">(12)</a> <a href="#ref-for-elementdef-marker①⑥">(13)</a> <a href="#ref-for-elementdef-marker①⑦">(14)</a> <a href="#ref-for-elementdef-marker①⑧">(15)</a> <a href="#ref-for-elementdef-marker①⑨">(16)</a> <a href="#ref-for-elementdef-marker②⓪">(17)</a> <a href="#ref-for-elementdef-marker②①">(18)</a> <a href="#ref-for-elementdef-marker②②">(19)</a> <a href="#ref-for-elementdef-marker②③">(20)</a> <a href="#ref-for-elementdef-marker②④">(21)</a> <a href="#ref-for-elementdef-marker②⑤">(22)</a> <a href="#ref-for-elementdef-marker②⑥">(23)</a> <a href="#ref-for-elementdef-marker②⑦">(24)</a> <a href="#ref-for-elementdef-marker②⑧">(25)</a> <a href="#ref-for-elementdef-marker②⑨">(26)</a> <a href="#ref-for-elementdef-marker③⓪">(27)</a> <a href="#ref-for-elementdef-marker③①">(28)</a> <a href="#ref-for-elementdef-marker③②">(29)</a>
    <li><a href="#ref-for-elementdef-marker③③">3. Referencing marker elements</a> <a href="#ref-for-elementdef-marker③④">(2)</a> <a href="#ref-for-elementdef-marker③⑤">(3)</a> <a href="#ref-for-elementdef-marker③⑥">(4)</a> <a href="#ref-for-elementdef-marker③⑦">(5)</a> <a href="#ref-for-elementdef-marker③⑧">(6)</a> <a href="#ref-for-elementdef-marker③⑨">(7)</a>
    <li><a href="#ref-for-elementdef-marker④⓪">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a>
    <li><a href="#ref-for-elementdef-marker④①">5. Segment markers: the marker-segment property</a>
    <li><a href="#ref-for-elementdef-marker④②">6. Repeating markers: the marker-pattern property</a>
    <li><a href="#ref-for-elementdef-marker④③">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-elementdef-marker④④">(2)</a>
    <li><a href="#ref-for-elementdef-marker④⑤">9. Details on how markers are rendered</a> <a href="#ref-for-elementdef-marker④⑥">(2)</a> <a href="#ref-for-elementdef-marker④⑦">(3)</a> <a href="#ref-for-elementdef-marker④⑧">(4)</a> <a href="#ref-for-elementdef-marker④⑨">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-marker-markerunits">
   <b><a href="#element-attrdef-marker-markerunits">#element-attrdef-marker-markerunits</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-marker-markerunits">2. The marker element</a> <a href="#ref-for-element-attrdef-marker-markerunits①">(2)</a> <a href="#ref-for-element-attrdef-marker-markerunits②">(3)</a> <a href="#ref-for-element-attrdef-marker-markerunits③">(4)</a>
    <li><a href="#ref-for-element-attrdef-marker-markerunits④">9. Details on how markers are rendered</a> <a href="#ref-for-element-attrdef-marker-markerunits⑤">(2)</a> <a href="#ref-for-element-attrdef-marker-markerunits⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-markerunits-strokewidth">
   <b><a href="#valdef-markerunits-strokewidth">#valdef-markerunits-strokewidth</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-markerunits-strokewidth">9. Details on how markers are rendered</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-markerunits-userspaceonuse">
   <b><a href="#valdef-markerunits-userspaceonuse">#valdef-markerunits-userspaceonuse</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-markerunits-userspaceonuse">9. Details on how markers are rendered</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-marker-markerwidth">
   <b><a href="#element-attrdef-marker-markerwidth">#element-attrdef-marker-markerwidth</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-marker-markerwidth">2. The marker element</a> <a href="#ref-for-element-attrdef-marker-markerwidth①">(2)</a> <a href="#ref-for-element-attrdef-marker-markerwidth②">(3)</a> <a href="#ref-for-element-attrdef-marker-markerwidth③">(4)</a> <a href="#ref-for-element-attrdef-marker-markerwidth④">(5)</a> <a href="#ref-for-element-attrdef-marker-markerwidth⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-marker-markerheight">
   <b><a href="#element-attrdef-marker-markerheight">#element-attrdef-marker-markerheight</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-marker-markerheight">2. The marker element</a> <a href="#ref-for-element-attrdef-marker-markerheight①">(2)</a> <a href="#ref-for-element-attrdef-marker-markerheight②">(3)</a> <a href="#ref-for-element-attrdef-marker-markerheight③">(4)</a> <a href="#ref-for-element-attrdef-marker-markerheight④">(5)</a> <a href="#ref-for-element-attrdef-marker-markerheight⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-marker-refx">
   <b><a href="#element-attrdef-marker-refx">#element-attrdef-marker-refx</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-marker-refx">2. The marker element</a> <a href="#ref-for-element-attrdef-marker-refx①">(2)</a> <a href="#ref-for-element-attrdef-marker-refx②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-marker-refy">
   <b><a href="#element-attrdef-marker-refy">#element-attrdef-marker-refy</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-marker-refy">2. The marker element</a> <a href="#ref-for-element-attrdef-marker-refy①">(2)</a> <a href="#ref-for-element-attrdef-marker-refy②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-marker-orient">
   <b><a href="#element-attrdef-marker-orient">#element-attrdef-marker-orient</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-marker-orient">2. The marker element</a> <a href="#ref-for-element-attrdef-marker-orient①">(2)</a> <a href="#ref-for-element-attrdef-marker-orient②">(3)</a>
    <li><a href="#ref-for-element-attrdef-marker-orient③">9. Details on how markers are rendered</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-marker-position">
   <b><a href="#element-attrdef-marker-position">#element-attrdef-marker-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-marker-position">1. Introduction</a>
    <li><a href="#ref-for-element-attrdef-marker-position①">2. The marker element</a> <a href="#ref-for-element-attrdef-marker-position②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-marker-href">
   <b><a href="#element-attrdef-marker-href">#element-attrdef-marker-href</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-marker-href">2. The marker element</a> <a href="#ref-for-element-attrdef-marker-href①">(2)</a> <a href="#ref-for-element-attrdef-marker-href②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-marker-viewbox">
   <b><a href="#element-attrdef-marker-viewbox">#element-attrdef-marker-viewbox</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-marker-viewbox">2. The marker element</a> <a href="#ref-for-element-attrdef-marker-viewbox①">(2)</a> <a href="#ref-for-element-attrdef-marker-viewbox②">(3)</a> <a href="#ref-for-element-attrdef-marker-viewbox③">(4)</a> <a href="#ref-for-element-attrdef-marker-viewbox④">(5)</a> <a href="#ref-for-element-attrdef-marker-viewbox⑤">(6)</a> <a href="#ref-for-element-attrdef-marker-viewbox⑥">(7)</a> <a href="#ref-for-element-attrdef-marker-viewbox⑦">(8)</a> <a href="#ref-for-element-attrdef-marker-viewbox⑧">(9)</a>
    <li><a href="#ref-for-element-attrdef-marker-viewbox⑨">9. Details on how markers are rendered</a> <a href="#ref-for-element-attrdef-marker-viewbox①⓪">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-marker-preserveaspectratio">
   <b><a href="#element-attrdef-marker-preserveaspectratio">#element-attrdef-marker-preserveaspectratio</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-marker-preserveaspectratio">2. The marker element</a> <a href="#ref-for-element-attrdef-marker-preserveaspectratio①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="DataTypeMarkerRef">
   <b><a href="#DataTypeMarkerRef">#DataTypeMarkerRef</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-DataTypeMarkerRef">3. Referencing marker elements</a>
    <li><a href="#ref-for-DataTypeMarkerRef①">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a> <a href="#ref-for-DataTypeMarkerRef②">(2)</a> <a href="#ref-for-DataTypeMarkerRef③">(3)</a>
    <li><a href="#ref-for-DataTypeMarkerRef④">5. Segment markers: the marker-segment property</a> <a href="#ref-for-DataTypeMarkerRef⑤">(2)</a> <a href="#ref-for-DataTypeMarkerRef⑥">(3)</a>
    <li><a href="#ref-for-DataTypeMarkerRef⑦">6. Repeating markers: the marker-pattern property</a> <a href="#ref-for-DataTypeMarkerRef⑧">(2)</a> <a href="#ref-for-DataTypeMarkerRef⑨">(3)</a> <a href="#ref-for-DataTypeMarkerRef①⓪">(4)</a>
    <li><a href="#ref-for-DataTypeMarkerRef①①">7. Marker shorthand: the marker property</a> <a href="#ref-for-DataTypeMarkerRef①②">(2)</a> <a href="#ref-for-DataTypeMarkerRef①③">(3)</a> <a href="#ref-for-DataTypeMarkerRef①④">(4)</a> <a href="#ref-for-DataTypeMarkerRef①⑤">(5)</a> <a href="#ref-for-DataTypeMarkerRef①⑥">(6)</a> <a href="#ref-for-DataTypeMarkerRef①⑦">(7)</a> <a href="#ref-for-DataTypeMarkerRef①⑧">(8)</a> <a href="#ref-for-DataTypeMarkerRef①⑨">(9)</a> <a href="#ref-for-DataTypeMarkerRef②⓪">(10)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-child-selector">
   <b><a href="#typedef-child-selector">#typedef-child-selector</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-child-selector">3. Referencing marker elements</a> <a href="#ref-for-typedef-child-selector①">(2)</a> <a href="#ref-for-typedef-child-selector②">(3)</a> <a href="#ref-for-typedef-child-selector③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-marker-start">
   <b><a href="#propdef-marker-start">#propdef-marker-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-marker-start">1. Introduction</a> <a href="#ref-for-propdef-marker-start①">(2)</a> <a href="#ref-for-propdef-marker-start②">(3)</a> <a href="#ref-for-propdef-marker-start③">(4)</a>
    <li><a href="#ref-for-propdef-marker-start④">2. The marker element</a>
    <li><a href="#ref-for-propdef-marker-start⑤">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a> <a href="#ref-for-propdef-marker-start⑥">(2)</a> <a href="#ref-for-propdef-marker-start⑦">(3)</a> <a href="#ref-for-propdef-marker-start⑧">(4)</a>
    <li><a href="#ref-for-propdef-marker-start⑨">7. Marker shorthand: the marker property</a> <a href="#ref-for-propdef-marker-start①⓪">(2)</a> <a href="#ref-for-propdef-marker-start①①">(3)</a> <a href="#ref-for-propdef-marker-start①②">(4)</a> <a href="#ref-for-propdef-marker-start①③">(5)</a> <a href="#ref-for-propdef-marker-start①④">(6)</a> <a href="#ref-for-propdef-marker-start①⑤">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-marker-mid">
   <b><a href="#propdef-marker-mid">#propdef-marker-mid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-marker-mid">1. Introduction</a> <a href="#ref-for-propdef-marker-mid①">(2)</a> <a href="#ref-for-propdef-marker-mid②">(3)</a>
    <li><a href="#ref-for-propdef-marker-mid③">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a> <a href="#ref-for-propdef-marker-mid④">(2)</a> <a href="#ref-for-propdef-marker-mid⑤">(3)</a>
    <li><a href="#ref-for-propdef-marker-mid⑥">7. Marker shorthand: the marker property</a> <a href="#ref-for-propdef-marker-mid⑦">(2)</a> <a href="#ref-for-propdef-marker-mid⑧">(3)</a> <a href="#ref-for-propdef-marker-mid⑨">(4)</a> <a href="#ref-for-propdef-marker-mid①⓪">(5)</a> <a href="#ref-for-propdef-marker-mid①①">(6)</a> <a href="#ref-for-propdef-marker-mid①②">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-marker-end">
   <b><a href="#propdef-marker-end">#propdef-marker-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-marker-end">1. Introduction</a> <a href="#ref-for-propdef-marker-end①">(2)</a> <a href="#ref-for-propdef-marker-end②">(3)</a>
    <li><a href="#ref-for-propdef-marker-end③">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a> <a href="#ref-for-propdef-marker-end④">(2)</a> <a href="#ref-for-propdef-marker-end⑤">(3)</a> <a href="#ref-for-propdef-marker-end⑥">(4)</a> <a href="#ref-for-propdef-marker-end⑦">(5)</a>
    <li><a href="#ref-for-propdef-marker-end⑧">7. Marker shorthand: the marker property</a> <a href="#ref-for-propdef-marker-end⑨">(2)</a> <a href="#ref-for-propdef-marker-end①⓪">(3)</a> <a href="#ref-for-propdef-marker-end①①">(4)</a> <a href="#ref-for-propdef-marker-end①②">(5)</a> <a href="#ref-for-propdef-marker-end①③">(6)</a> <a href="#ref-for-propdef-marker-end①④">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-marker-start-none">
   <b><a href="#valdef-marker-start-none">#valdef-marker-start-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-marker-start-none">4. Vertex markers: the marker-start,
marker-mid and marker-end properties</a>
    <li><a href="#ref-for-valdef-marker-start-none①">7. Marker shorthand: the marker property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-marker-segment">
   <b><a href="#propdef-marker-segment">#propdef-marker-segment</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-marker-segment">1. Introduction</a> <a href="#ref-for-propdef-marker-segment①">(2)</a> <a href="#ref-for-propdef-marker-segment②">(3)</a>
    <li><a href="#ref-for-propdef-marker-segment③">5. Segment markers: the marker-segment property</a> <a href="#ref-for-propdef-marker-segment④">(2)</a>
    <li><a href="#ref-for-propdef-marker-segment⑤">7. Marker shorthand: the marker property</a> <a href="#ref-for-propdef-marker-segment⑥">(2)</a> <a href="#ref-for-propdef-marker-segment⑦">(3)</a> <a href="#ref-for-propdef-marker-segment⑧">(4)</a> <a href="#ref-for-propdef-marker-segment⑨">(5)</a> <a href="#ref-for-propdef-marker-segment①⓪">(6)</a> <a href="#ref-for-propdef-marker-segment①①">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-marker-pattern">
   <b><a href="#propdef-marker-pattern">#propdef-marker-pattern</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-marker-pattern">1. Introduction</a> <a href="#ref-for-propdef-marker-pattern①">(2)</a> <a href="#ref-for-propdef-marker-pattern②">(3)</a>
    <li><a href="#ref-for-propdef-marker-pattern③">6. Repeating markers: the marker-pattern property</a> <a href="#ref-for-propdef-marker-pattern④">(2)</a> <a href="#ref-for-propdef-marker-pattern⑤">(3)</a> <a href="#ref-for-propdef-marker-pattern⑥">(4)</a>
    <li><a href="#ref-for-propdef-marker-pattern⑦">7. Marker shorthand: the marker property</a> <a href="#ref-for-propdef-marker-pattern⑧">(2)</a> <a href="#ref-for-propdef-marker-pattern⑨">(3)</a> <a href="#ref-for-propdef-marker-pattern①⓪">(4)</a> <a href="#ref-for-propdef-marker-pattern①①">(5)</a> <a href="#ref-for-propdef-marker-pattern①②">(6)</a> <a href="#ref-for-propdef-marker-pattern①③">(7)</a> <a href="#ref-for-propdef-marker-pattern①④">(8)</a> <a href="#ref-for-propdef-marker-pattern①⑤">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-marker-gap">
   <b><a href="#typedef-marker-gap">#typedef-marker-gap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-marker-gap">6. Repeating markers: the marker-pattern property</a> <a href="#ref-for-typedef-marker-gap①">(2)</a> <a href="#ref-for-typedef-marker-gap②">(3)</a> <a href="#ref-for-typedef-marker-gap③">(4)</a> <a href="#ref-for-typedef-marker-gap④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-marker-ref-group">
   <b><a href="#typedef-marker-ref-group">#typedef-marker-ref-group</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-marker-ref-group">6. Repeating markers: the marker-pattern property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-marker-pattern-none">
   <b><a href="#valdef-marker-pattern-none">#valdef-marker-pattern-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-marker-pattern-none">6. Repeating markers: the marker-pattern property</a> <a href="#ref-for-valdef-marker-pattern-none①">(2)</a>
    <li><a href="#ref-for-valdef-marker-pattern-none②">7. Marker shorthand: the marker property</a> <a href="#ref-for-valdef-marker-pattern-none③">(2)</a> <a href="#ref-for-valdef-marker-pattern-none④">(3)</a> <a href="#ref-for-valdef-marker-pattern-none⑤">(4)</a> <a href="#ref-for-valdef-marker-pattern-none⑥">(5)</a> <a href="#ref-for-valdef-marker-pattern-none⑦">(6)</a> <a href="#ref-for-valdef-marker-pattern-none⑧">(7)</a> <a href="#ref-for-valdef-marker-pattern-none⑨">(8)</a> <a href="#ref-for-valdef-marker-pattern-none①⓪">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-marker">
   <b><a href="#propdef-marker">#propdef-marker</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-marker">2. The marker element</a>
    <li><a href="#ref-for-propdef-marker①">7. Marker shorthand: the marker property</a> <a href="#ref-for-propdef-marker②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-marker-knockout-left">
   <b><a href="#propdef-marker-knockout-left">#propdef-marker-knockout-left</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-marker-knockout-left">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-propdef-marker-knockout-left①">(2)</a> <a href="#ref-for-propdef-marker-knockout-left②">(3)</a> <a href="#ref-for-propdef-marker-knockout-left③">(4)</a> <a href="#ref-for-propdef-marker-knockout-left④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-marker-knockout-right">
   <b><a href="#propdef-marker-knockout-right">#propdef-marker-knockout-right</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-marker-knockout-right">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-propdef-marker-knockout-right①">(2)</a> <a href="#ref-for-propdef-marker-knockout-right②">(3)</a> <a href="#ref-for-propdef-marker-knockout-right③">(4)</a> <a href="#ref-for-propdef-marker-knockout-right④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-knockout-offset">
   <b><a href="#typedef-knockout-offset">#typedef-knockout-offset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-knockout-offset">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-typedef-knockout-offset①">(2)</a> <a href="#ref-for-typedef-knockout-offset②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-knockout-shape">
   <b><a href="#typedef-knockout-shape">#typedef-knockout-shape</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-knockout-shape">8. Knocking out the stroke: the marker-knockout-left and marker-knockout-right properties</a> <a href="#ref-for-typedef-knockout-shape①">(2)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>